Canvas做游戏实践分享(五)

3.5 渐变                                                    

    Canvas的渐变有两各路 ，线性或径向。在使用gradient时，注意使用createLinearGradient与createRadiusGradient所创建的fillStyle均只在其指定的矩形/圆环区域内生效，如果要fill的图形处于gradient对象之后，则fill后的区域不会出现预料的渐变效果。

如下代码，演示了如何使用渐变：

                      window.onload=function(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
                                //定义纯性渐变
				var point1={x:0,y:0},point2={x:100,y:100};
				var gradient=context.createLinearGradient(point1.x,point1.y,point2.x,point2.y);
				gradient.addColorStop(0,'#ff0000');
				gradient.addColorStop(1,'#00ff00');
	                        //使用线性渐变绘制距形
				context.fillStyle=gradient;
				context.fillRect(0,0,100,100);
				context.fillRect(100,0,200,100);
                                //定义线性渐变
				var gradient1=context.createLinearGradient(0,100,200,200);
				gradient1.addColorStop(0,'#ff0000');
				gradient1.addColorStop(0.5,'#00ff00');
				gradient1.addColorStop(1,'#0000ff');
                                //使用线性渐变绘制距形，注意此处渐变区域
				context.fillStyle=gradient1;
				context.fillRect(0,100,100,200);
                                //定义径向渐变
				var c1 = {x: 300, y: 300, radius: 0};
				var c2 = {x: 300, y: 300, radius: 50};
                                var gradient2=context.createRadialGradient(c1.x,c1.y,c1.radius,c2.x,c2.y,c2.radius);
				gradient2.addColorStop(0,'#ffff00');
				gradient2.addColorStop(0.5,'#00ffff');
				gradient2.addColorStop(1,'#ff00ff');
                                //使用径向渐变绘制圆形
				context.fillStyle=gradient2;
				context.arc(300,300,50,0,Math.PI*2,true);
				context.fill();		
			};

 其效果图如下所示：

 3.6图片加载

    大多数的游戏中的素材都是图片，无论使用单个的图片，还是使用CSS-Sprite方式，都需要将其绘制在Canvas画布上。可以使用动态加载的方式加载图片。
    Canvas提供了一些像素级操作图片的方法getImageData,createImageData与pubImageData。对于每一个像素点，都可以由R,G,B,A四个连续的数字组成。于是，一张图片中所有的点就可以由一个数组来描述，这个数组每四个元素表示一个像素点的值。任意一个像素点在数组中的偏移位置为：

 

var offset = (xpos + ypos * imagedata.width) * 4;

 通过对每一个像素的RGBA值的精确处理，可以实现各种效果，如下，实现了一个圣诞节彩喷字体样式的画图板：

                   window.onload=function(){
                               //初始化各类参数
                                var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				var mouse=utils.captureMouse(canvas);
				var imageData=context.getImageData(0,0,canvas.width,canvas.height);
				var pixels=imageData.data;
				var brush_width=20;
				var brush_destiny=50;
				var brush_color='#ffffff';
				//注册鼠标按下操作：获取随机色
				canvas.addEventListener("mousedown",function(){
					brush_color = utils.parseColor(Math.random() * 0xffffff, true); 
					canvas.addEventListener("mousemove",onMouseMove,false);
				},false);
                               //注册鼠标按键松开状态：取消鼠标移动监听事件
                                canvas.addEventListener("mouseup",function(){
					canvas.removeEventListener("mousemove",onMouseMove,false);
				},false);
				//鼠标移动事件
				function onMouseMove(){
					for(var i=0;i<brush_destiny;i++){
                                               //以鼠标位置为圆心，取得随机的一个点的坐标（三角函数表示)
                                                var angle=Math.random()*Math.PI*2;
						var radius=Math.random()*brush_width;
						var positionX=(mouse.x+Math.cos(angle)*radius)|0;
						var positionY=(mouse.y+Math.sin(angle)*radius)|0;
                                                //取得当前随机点在整个画面imageData中的偏移，修正当前像素RGBA色为鼠标按下时指定的色彩
                                                var offset=(positionX+positionY*imageData.width)*4;
						pixels[offset] = brush_color >> 16 & 0xff; //red
						pixels[offset + 1] = brush_color >> 8 & 0xff; //green
						pixels[offset + 2] = brush_color & 0xff; //blue
						pixels[offset + 3] = 255; //alpha
					}
                                         //将修正过的imageData生效到当前画布
                                         context.putImageData(imageData,0,0);
				}
			};

 如下为其效果图：

此处用到一个工具函数来对色彩进行处理

utils.parseColor=function(color,toNumber){
	if(toNumber===true){
                //将指定的色彩转化为数字值
		if(typeof color ==='number'){
			return (color | 0);
		}
		if(typeof color === 'string' && color[0]==='#'){
			color=color.slice(1);
		}
		return window.parseInt(color,16);
	}else{
                //将输入的数字转换为RGB色彩值
		if(typeof color === 'number'){
			color='#'+('00000'+(color | 0).toString(16)).substr(-6);
		}
		return color;
	}
};