H5 canvas基础入门到捕鱼达人小游戏实现(3)-canvas运动入门,渐变,文字渲染,阴影

上一篇主要讲解了矩形柱状图，弧形和饼图的绘制，但是离我们的目标还是有点远，不要紧，我们基础api都还没有学习完，今天继续。

本节主要内容
- canvas画板制作
- 块的直线运动
- 粒子运动
- 线性渐变
- 径向渐变
- 文字渲染
- 阴影

canvas画板

canvas画板简单来说就是设置一块画布在上面自由画线，看看效果图

document.addEventListener('DOMContentLoaded',function(){var canvas = document.querySelector("#canvas");var context = canvas.getContext("2d");var oC = document.querySelector("#clear");canvas.onmousedown = function(e){context.beginPath();context.moveTo(e.pageX,e.pageY);document.onmousemove = function(e){context.lineTo(e.pageX,e.pageY);context.stroke();};document.onmouseup = function(){document.onmousemove=null;document.onmouseup=null;};};oC.onclick=function(){context.clearRect(0,0,canvas.width,canvas.height);};
},false);

这个代码还是比较简单的，这里有一点需要讲讲就是清除画板功能。

canvas.clearRect(x,y,w,h);
x,y：画布的位置
w,h：清除的宽高

其实这里有一个非常重要的知识点：整个canvas的动画其实都是依赖clearRect这个api来实现的，其实在上一篇文章中的动态柱状图中其实已经使用过该api。但是这里我还是想举一个简单的例子来看看是如何实现运动的。

块的直线运动

看看效果图：

看这图片我们分析下：
1、首先绘制一个方块
2、动态改变块的绘制位置
直接代码实现：

var oC = document.getElementById('c1');var gd = oC.getContext('2d');gd.beginPath();var k=1;function step(){k+=2;gd.clearRect(0,0,oC.width,oC.height);gd.fillStyle = "red";gd.fillRect(k,0,100,100);requestAnimationFrame(step);}step();

可以把clearRect去除试试，这样会绘制出很长一条应为，绘制后面一帧的时候，没有清楚前面一帧。

在看一个更加复杂点的例子粒子运动

粒子运动

先看看运动效果

需求：
1、页面出现5个小粒子
2、5个粒子在画布中随机运动，并且当碰到画布边缘，会反弹回来
3、5个粒子进行连线

按照需求直接上代码：

function rnd(n,m){return Math.floor(n+Math.random()*(m-n));
}
document.addEventListener('DOMContentLoaded',function(){var oC = document.getElementById('c1');oC.width = document.documentElement.clientWidth;oC.height = document.documentElement.clientHeight;var gd = oC.getContext('2d');/*** 界面生成5个粒子* 粒子开始运动* 开始连线*/var aPoint = [];//生成粒子函数var draw = function(obj){gd.beginPath();gd.fillStyle = '#fff';gd.fillRect(obj.x,obj.y,10,10);};//添加5个粒子参数放入数组for(var i=0;i<5;i++){aPoint.push({x:rnd(0,256),y:rnd(0,256),speedX:rnd(-10,10),speedY:rnd(-10,10)});}//开始动画function step() {gd.clearRect(0,0,oC.width,oC.height);//不断刷新绘制5个点for(var i=0;i<5;i++){draw(aPoint[i]);}//运动处理，以及边缘处理for(var i=0;i<5;i++){if(aPoint[i].x<0){aPoint[i].x = 0;aPoint[i].speedX*=-1;}if(aPoint[i].x>=oC.width){aPoint[i].x=oC.width;aPoint[i].speedX*=-1;}if(aPoint[i].y<0){aPoint[i].y = 0;aPoint[i].speedY*=-1;}if(aPoint[i].y>=oC.height){aPoint[i].y=oC.height;aPoint[i].speedY*=-1;}aPoint[i].x +=aPoint[i].speedX;aPoint[i].y +=aPoint[i].speedY;}//5个点进行连线gd.beginPath();gd.moveTo(aPoint[0].x,aPoint[0].y);for(var i=1;i<aPoint.length;i++){gd.lineTo(aPoint[i].x,aPoint[i].y);}gd.closePath();gd.strokeStyle = "#fff";gd.stroke();requestAnimationFrame(step);}step();
},false);

线性渐变和径向渐变

线性渐变api解释

var lg = context.crateLinearGradient(xStart,yStart,xEnd,yEnd);//线性渐变
lg.addColorStop(offset,color);//线性渐变颜色
xStart,yStart：渐变开始点坐标
xEnd,yEnd：渐变结束点坐标offset：设定的颜色离渐变结束点的偏移量(0~1)
color：绘制时要使用的颜色

实例代码：

var oC = document.getElementById('c1');
var gd = oC.getContext('2d');
var lg = gd.createLinearGradient(100,100,400,400);
lg.addColorStop(0,'red');//第一个参数0-1范围
lg.addColorStop(0.5,'blue');//第二个参数：rgb rgba #000 等颜色表示法都可以
lg.addColorStop(0.8,'pink');
lg.addColorStop(1,'yellow');
gd.fillStyle = lg;
gd.fillRect(0,0,0C.width,oC.height);

看下效果图：

径向渐变api解释

径向渐变：var rg = context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
xStart:发散开始圆心x坐标
yStart:发散开始圆心y坐标
radiusStart:发散开始圆的半径
xEnd:发散结束圆心的x坐标
yEnd:发散结束圆心的y坐标
radiusEnd:发散结束圆的半径
offset:设定的颜色离渐变结束点的偏移量(0~1)
color:绘制时要使用的颜色

实例代码：

var oC = document.getElementById('c1');
var gd = oC.getContext('2d');
var rg = gd.createRadialGradient(400,300,100,500,400,300);
rg.addColorStop(0,'red');
rg.addColorStop(1,'green');
gd.fillStyle = rg;
gd.fillRect(0,0,width,oC.height);

看看实际效果：

文字渲染

api解释

填充文字：context.fillText(text,x,y)
绘制文字轮廓：context.strokeText(text,x,y);
text：绘制的文字
x：文字起点的x坐标
y：文字起点的y坐标
context.font：设置字体样式
context.textAlign：水平对齐方式
context.textBaseline：垂直对齐方式
var length = context.measureText(text)：计算字体长度

实例代码：

var oC = document.getElementById('canvas');
var gd = oC.getContext('2d');
var str = '文字居中';
gd.font = '50px 微软雅黑';//字体大小+字体
gd.fillStyle = 'red';
gd.textAlign = 'center';
gd.textBaseline = 'middle';
gd.fillText(str,400,300);
//绘制对比坐标
gd.beginPath();
gd.moveTo(400,0);
gd.lineTo(400,600);
gd.stroke();gd.beginPath();
gd.moveTo(0,300);
gd.lineTo(800,300);
gd.stroke();

看下效果图：

文字渲染总体来说还是比较简单的。

阴影

文字阴影和图形的阴影api是基本一致的，所以一起来看看

方块的阴影

var oC = document.getElementById('c1');
var gd = oC.getContext('2d');gd.shadowOffsetX = 50;//x轴偏移
gd.shadowOffsetY = 50;//y轴偏移
gd.shadowBlur = 30;//扩散度
gd.shadowColor = 'red';阴影颜色
gd.fillRect(100,100,200,200);

看看效果图

文字阴影

var oC = document.getElementById('c1');
var gd = oC.getContext('2d');
gd.shadowOffsetX = 10;
gd.shadowOffsetY = 10;
gd.shadowBlur = 10;
gd.shadowColor = 'red';var str = '马容强，则王保强';
gd.font = '50px 微软雅黑';
gd.fillText(str,300,300);

图示：

总结：本节内容讲完，canvas常用api还剩下三个重点：1、图形动作；2、canvas事件；3、canvas图片处理。基础打好之后就可以开始写捕鱼了。加油~~~