javascript - HTML5 Canvas - 更改先前绘制的形状的颜色

Question

我的 Canvas 上有各种功能，可以在上面进行绘制。但是，当线条重叠并绘制在先前绘制的点上时，我希望重新绘制的点的颜色将颜色更改为较深的阴影。我要编写什么代码来评估某个点是否被绘制过？

Answer 1

您可以使用“混合”使 Canvas 上的重叠区域变暗

使用混合的优点是您不必跟踪以前绘制的笔触和填充。

如果您不关心支持 Internet Explorer/Edge，则可以使用 context.globalCompositeOperation="multiply"，它会通过在新的重叠绘图上应用乘法滤镜来变暗。 (对微软附注:来吧，MS...给我们更多像混合这样的好东西!)。

// For browser except IE/Edge...
// darken overlapping strokes using "multiply" compositing
ctx.fillStyle='skyblue';
ctx.fillRect(100,100,100,100);
ctx.globalCompositeOperation='multiply';
ctx.fillRect(75,150,100,100);

对于 IE/Edge，有一个“手动”乘法过滤器，其中涉及使用 context.getImageData 读取每个像素的 RGBA 信息，并对每个红色、绿色和蓝色值进行以下计算。这种手动方法比使用合成要慢得多。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

// rgb values for skyblue
var r=135;
var g=206;
var b=235;

multiplyFilter(100,100,100,100,r,g,b);
multiplyFilter(75,150,100,100,r,g,b);



function multiplyFilter(x,y,width,height,newRed,newGreen,newBlue){
  var imgData=ctx.getImageData(x,y,width,height);
  var data=imgData.data;
  for (var i=0;i<data.length;i+=4) {
    if(data[i+3]>0){
      data[i+0] = (data[i+0]*newRed)/255;
      data[i+1] = (data[i+1]*newGreen)/255;
      data[i+2] = (data[i+2]*newBlue)/255;
    }else{
      data[i+0]=newRed;
      data[i+1]=newGreen;
      data[i+2]=newBlue;
      data[i+3]=255;
    }
  }
  ctx.putImageData(imgData,x,y);
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<h4>Darken overlaps using a "manual" multiply filter</h4>
<canvas id="canvas" width=300 height=300></canvas>