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

Question

我的画布上有各种各样的功能，允许它被绘制。但是，当线条重叠并在先前绘制的点上绘制时，我希望重新绘制的点的颜色将颜色更改为更暗的阴影。我将用什么代码来评估一个点是否被抽出？

Answer 1

您可以使用＆＃34;混合＆＃34;使画布上的重叠区域变暗

使用混合的好处是您不必跟踪先前绘制的笔画和＆amp ;;罢了。

如果您不关心支持Internet Explorer / Edge，则可以使用context.globalCompositeOperation="multiply"，它会在新的重叠图纸上应用乘法滤镜，从而变暗。 （P.S to to Microsoft：Come on 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，有一个＆＃34;手册＆＃34;乘法滤波器，包括使用context.getImageData读取每个像素的RGBA信息，并对每个红色，绿色和＆amp;蓝色值。这种手动方法比使用合成慢得多。

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;