对于Canvas的使用，官方还是提供了不少api，但是任然有许多使用的功能官方没有提供，需要我们自己去实现。

1、增，即颜色填充。

对于颜色填充用fill相关的方法可以实现基本的填充，但是如果我们有更多的条件，比如需要将特定区域内的透明区域填充上颜色，fill方法就没办法实现了，我们可以通过imageData入手，根据透明区域的像素alpha值为0这个特性来实现这个方法：

/** * @params imageData 输入像素 * @params x 开始填充的x坐标 * @params y 开始填充的y坐标 * @params fillColor 需要填充的颜色 * @aprams width 填充区域的宽 * @params height 填充区域的高 */ function fillColor(imageData,x,y,fillColor,width,height){ var x = x || 0, y = y || 0, w = x + w || imageData.width, h = y + h || imageData.height; if(x<0 || y<0 || w>imageData.width || h>imageData.height){ throw new Error("error params!"); } for(var j=y;j<h;j++){ for(var i=x;i<w;i++){ var index = j * imageData.width + i, a = imageData.data[4*index+3]; if(a == 0){ imageData.data[4*index] = fillColor.r; imageData.data[4*index+1] = fillColor.g; imageData.data[4*index+2] = fillColor.b; imageData.data[4*index+3] = 255; } } } return imageData; }

2、删，改即颜色的删除和替换

对于特定区域的图形的清除，我们可以通过clearRect来达到目的，但是对于特定区域内颜色的替换，我们需要另觅他径，同样的我们可以通过像素的操作来实现：

/** * @params imageData 输入像素 * @params x 开始替换的x坐标 * @params y 开始替换的y坐标 * @params sourceColor 需要替换的颜色的rgb值，以对象形式传入 * @aprams w 替换区域的宽 * @params h 替换区域的高 * @params replaceColor 需要替换成的颜色，留空则删除原颜色 */ function replaceColor(imageData,x,y,sourceColor,w,h,replaceColor){ var x = x || 0, y = y || 0, w = x + w || imageData.width, h = y + h || imageData.height; if(x<0 || y<0 || w>imageData.width || h>imageData.height){ throw new Error("error params!"); } for(var j=y;j<h;j++){ for(var i=x;i<w;i++){ var index = j * imageData.width + i, r = imageData.data[4*index], g = imageData.data[4*index+1], b = imageData.data[4*index+2]; if(r==sourceColor.r && g==sourceColor.g && b==sourceColor.b){ if(replaceColor){ imageData.data[4*index] = replaceColor.r; imageData.data[4*index+1] = replaceColor.g; imageData.data[4*index+2] = replaceColor.b; imageData.data[4*index+3] = 255; }else{ imageData.data[4*index+3] = 0; } } } } return imageData; }