Canvas作游戏实践分享(五)

Canvas做游戏实践分享(五)
3.5 渐变????????????????????????????????????????????????????

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

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

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