[课程传送门]教你如何实现HTML5游戏中的动态背景效果
今天我们来学习一下如何实现HTML5游戏中的动态背景效果。
1通过canvas标签生成基础游戏背景色
canvas标签是一个非常强大的元素，利用它可以制作复杂的功能，绘制精美的画面。与其同时canvas相关的API方法也是特别的多，非常值得大家去学习，本节课讲解基本的API方法使用。
getContext("2d")方法，用于在canvas标签上进行2d绘图
fillStyle方法是设置或返回用于填充绘画的颜色，在本节课为我们的背景 设置一个天蓝色
beginPath和closePath方法分别表示开始绘制和结束绘制
rect方法用于绘制矩形
fill方法进行实际的颜色填充和绘制
在实际的项目应用中大家可以根据自己需要去调用它的方法
<canvas id="c"></canvas>
课程链接：
http://www.gbtags.com/gb/gbtutorials/792.htm
2利用arc方法绘制游戏中静态基础图形
上节课已经创建好了蓝色的游戏背景，本节目的在于绘制出多个大小，位置，颜色不同的圆。
为了实现所有圆的位置不同，大小不同，我们采用随机数的方式产生，把circle这个数组中push进去四个随机数，每一个都有他们对应的关系
每一个参数分别用来用来定义圆的x轴坐标，y轴坐标，圆心半径，颜色透明度，通过这些参数来实现圆的位置不同，大小不同，颜色透明度不同
<pre class="prettyprint linenums"
circles.push([Math.random() * width, Math.random() * height, Math.random() * 100, Math.random() / 2]);
通过arc方法绘制圆，arc(x,y,r,起始角，结束角，转动方向)。例如
<pre class="prettyprint linenums"
ctx.arc(100,75,50,0,2*Math.PI);
arc方法中的参数分别带别，圆的x轴，y轴，圆心半径，起始角度，结束角度，旋转方向，可以根据这些参数绘制部分圆以及完整圆。
canvas id="c"></canvas>
课程链接：
http://www.gbtags.com/gb/gbtutorials/802.htm
3 实现游戏中基础图形的动态背景效果
本节课添加了圆圈的动态方法，movecircles方法，用于让圆圈不断的从上往下掉落，并且控制了它的运动轨迹范围，如果从上往下掉落的过程中，圆心y坐标超出画布范围，那么从新再赋值给圆，继续执行。
为了保证画布的不断更新，以及画圆的方法，移动的方法不断执行，此处调用 setInterval(function,time)方法，该方法用于在固定周期内执行对应的函数表达式
setInterval(gameloop,30);
表示每0.03 秒调用一次gameloop方法。
var width = 320,
height = 400,
c = document.getElementById('c'),
ctx = c.getContext('2d');
<!-- 定义画布的高度和宽度 -->
c.width = width;
c.height = height;
<!--对画布进行颜色填充 -->
var clear = function{
ctx.fillStyle = '#d0e7f9';
ctx.beginPath;
ctx.rect(0, 0, width, height);
ctx.closePath;
ctx.fill;
}
<!-- 定义圆圈数组和个数 -->
var howManyCircles = 8, circles = ;
<!-- 为数组设置数据，以便于在绘制圆圈的时候，放入数据 -->
for (var i = 0; i < howManyCircles; i++)
circles.push([Math.random() * width, Math.random() * height, Math.random() * 100, Math.random() / 2]);
<!--通过arc方法进行实际的圆圈绘制 -->
var DrawCircles = function{
for (var i = 0; i < howManyCircles; i++) {
ctx.fillStyle = 'rgba(255, 255, 255, ' + circles[i][3] + ')';
ctx.beginPath;
ctx.arc(circles[i][0], circles[i][1], circles[i][2], 0, Math.PI * 2, true);
ctx.closePath;
ctx.fill;
}
};
var movecircles = function(yunm){
for (var i = 0; i < howManyCircles; i++) {
if ( circles[i][1] - circles[i][2] > height) {
circles[i][0] = Math.random * width;
circles[i][2] = Math.random * 100;
circles[i][1] = 0 - circles[i][2];
circles[i][3] = Math.random / 2;
}
else {
circles[i][1] += yunm;
}
}
}
var gameloop = function{
clear;
movecircles(3);
DrawCircles;
}
setInterval(gameloop,30)
课程链接：
http://www.gbtags.com/gb/gbtutorials/803.htm
想要查看具体动态效果的小伙伴，可以长按下方图片，扫描图中二维码：