我有一个可以导入各种黑白图片的 Canvas ，我希望它的笔触不会在黑色像素上着色。现在，画笔效果完成了:
var ctx = canvas.getContext('2d');
...
ctx.beginPath();
//xy being the mouse coordinates, retrieved earlier.
ctx.arc(xy[0], xy[1], ctx.lineWidth/2, 0, 2*Math.PI, true);
ctx.closePath();
ctx.fill();
这是我想要达到的效果的一个例子。
最佳答案
[根据提问者更新新信息]
Canvas 尚不支持颜色混合，因此您可以使用 getImageData
context.getImageData 获取一个数组，表示 Canvas 上每个像素的红色、绿色、蓝色和 alpha 值。
您可以使用这些像素阵列将图像上的白色像素替换为上面的笔划像素。
- 获取笔画的像素数组
- 获取图片的像素数组
- 将每个笔画像素与每个图像像素进行比较
- 如果笔划在白色像素上，则用笔划颜色像素替换白色像素
注意事项:
黑白图像通常是灰度图像，实际上并不是纯黑白图像。要替换“偏白”像素，您必须针对更广泛的 rgb 组合测试图像像素。白色像素往往具有较高的 rgb 颜色值总和，因此您可以测试 r+b+g 是否 >600(或您想要的“白色”截止值)。
要使用 getImageData，在 Canvas 上绘制的图像必须源自与网页相同的域，否则 getImageData 将因安全违规而失败。这可能需要您将用户图像上传到您的服务器并将其传送回网页。或者，您可以在支持它的客户端上使用 FileReader，让用户将图像从他们的本地文件系统加载到网页。
这是示例代码和演示:http://jsfiddle.net/m1erickson/26N7S/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var imgDataImage,imgDataStroke,dataImage,dataStroke;
var img=new Image();
img.crossOrigin="anonymous";
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/BW.gif";
function start(){
canvas.width=img.width+100;
canvas.height=img.height+100;
drawStroke(ctx);
imgDataStroke=ctx.getImageData(0,0,canvas.width,canvas.height);
dataStroke=imgDataStroke.data;
ctx.clearRect(0,0,canvas.width,canvas.height);
drawImage();
imgDataImage=ctx.getImageData(0,0,canvas.width,canvas.height);
dataImage=imgDataImage.data;
for(var i=0;i<dataStroke.length;i+=4){
if(dataStroke[i+3]<200){
// not under stroke, no changes to image
}else if(dataImage[i+3]<200){
// is under stroke, but not over image
// so replace the image pixel with the color of the stroke
dataImage[i+0]=dataStroke[i+0];
dataImage[i+1]=dataStroke[i+1];
dataImage[i+2]=dataStroke[i+2];
dataImage[i+3]=dataStroke[i+3];
}else if(dataImage[i]+dataImage[i+1]+dataImage[i+2]>150){
// this image pixel is under the stroke and is "blackish",
// so replace the image pixel with the color of the stroke
dataImage[i+0]=dataStroke[i+0];
dataImage[i+1]=dataStroke[i+1];
dataImage[i+2]=dataStroke[i+2];
dataImage[i+3]=dataStroke[i+3];
}else{
// the pixel is under the stroke but is not "blackish",
// so no changes to image
}
}
ctx.putImageData(imgDataImage,0,0);
}
function drawImage(){
ctx.drawImage(img,50,50);
}
function drawStroke(ctx){
ctx.lineCap="round";
ctx.lineWidth=15;
ctx.strokeStyle="lightcoral";
ctx.beginPath();
ctx.moveTo(75,25);
ctx.lineTo(canvas.width-75,canvas.height-25);
ctx.stroke();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
关于javascript - 如何避免在 HTML5 Canvas 中对特定颜色着色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24658155/