[Fes]基于canvas的前端动画-游戏介绍（下）

canvas操作像素如果你认为canvas只是一个绘图工具，那么接下来的操作将颠覆你的认知。Canvas提供了一个api来获取画布上的任何像素并自由操作它们。获取像素和直接访问像素的功能是由画布上下文中的ImageData对象提供的，它提供了如下一组方法，这些方法都返回ImageData对象。getImageData()接受x轴坐标、y轴坐标、宽高四个参数，获取画布上这个矩形区域的像素数据；createImageData()可以凭空创建一个指定宽高的矩形区域。初始颜色为黑色，或者你可以输入一个ImageData对象，用于创建一个相同大小的区域，但注意没有像素数据被复制。context.getImageData(x,y,width,height);context.createImageData(width,height);context.createImageData(nothorImageData);获取到的ImageData对象中的data属性是一个一维数组，乍一看很乱，其实很好你会发现这其实是RGBA的颜色数据，即数组中每四位就是颜色数据一个像素。这里注意透明度A也是0~255，不是CSS中简化的0~1。例如，现在假设在纯红色区域取一个2*2的矩形，我们得到的像素数据为：设pixels=[255,0,0,255,255,0,0,255,255,0,0,255,255,0,0,255]它们和图片的对应关系是从左到右，从上到下，大概像上面代码的格式，如图：根据4to1对应，我们可以很方便的写一个遍历方法，offset相当于一个指针，每次移动4位，代码如下：for(letoffset=0,len=pixels.length;offset>16&0xff;像素[偏移量+1]=brush_color>>8&0xff;像素[偏移量+2]=brush_color&0xff;像素[偏移量+3]=255；}//重绘区域context.putImageData(imageData,0,0);}canvas.addEventListener('mousedown',()=>{//随机颜色brush_color=utils.parseColor(Math.random()*0xffffff,true);canvas.addEventListener('mousemove',onMouseMove,false);}，错误的）;canvas.addEventListener('mouseup',()=>{canvas.removeEventListener('mousemove',onMouseMove,false);},false);};