[课程传送门]教你如何实现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"

1. circles.push([Math.random() * width, Math.random() * height, Math.random() * 100, Math.random() / 2]);

• 通过arc方法绘制圆，arc(x,y,r,起始角，结束角，转动方向)。例如

<pre class="prettyprint linenums"

1. 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

想要查看具体动态效果的小伙伴，可以长按下方图片，扫描图中二维码：