用alpha颜色覆盖画布的部分图像

Question

我正在使用画布控件。 我将图像加载到其中：

var cn1 = document.getElementById('canvas1');
cn1.addEventListener("mousedown", getPosition, false);

var context = cn1.getContext('2d');
var width = 360;
var height = 240
cn1.width = 360;
cn1.height = 240;
var imageObj = new Image();

imageObj.onload = function () {
    context.drawImage(imageObj, 0, 0, width, height);
    DrawLines();
};
imageObj.src = '/Images/7.jpg';

然后我使用：

覆盖一些网格线

function DrawLines()
{       
    context.beginPath();
    for (var x = 0; x < 361; x = x + 24) {
        context.moveTo(x, 0);
        context.lineTo(x, 0);
        context.lineTo(x, 240);
    }
    for (var y = 0; y < 241; y = y + 24) {
        context.moveTo(0, y);
        context.lineTo(0, y);
        context.lineTo(360, y);
    }
    context.lineWidth = 1;
    context.strokeStyle = '#FC5C5C';
    context.stroke();
    context.closePath();
}

这给了我这个样子：

然后，我点击一个单元格想要覆盖蓝色并设置其Alpha透明度，这样用户仍然可以看到原始图像。

模拟这个看起来像：

我可以处理点击事件。我需要的是用我的半透明蓝色覆盖的JavaScript。

我在StackOverFlow上找到了这个：

// Loops through all of the pixels and modifies the components.
for (var i = 0, n = pix.length; i <n; i += 4) {
      pix[i] = uniqueColor[0];   // Red component
      pix[i+1] = uniqueColor[1]; // Green component
      pix[i+2] = uniqueColor[2]; // Blue component
      //pix[i+3] is the transparency.
}
ctx.putImageData(imgd, 0, 0);

从这个链接：Another example但这不会给我我想要的东西。我怎样才能实现我的目标？

感谢

Answer 1

只需使用fillStyle将rgba()设置为透明色，然后使用该样式集将fillRect()设置为透明色。

使用getImageData / putImageData是可能的，但速度较慢，如果图像是从与页面不同的原点加载的，则需要完成CORS。

以下是您可以做的事情：

context.fillStyle = "rgba(150,150,255, 0.3)";  // last value is alpha [0.0, 1.0]
context.fillRect(x, y, w, h);

提示：您还可以将网格线代码缩减为：

context.moveTo(x, 0);
//context.lineTo(x, 0);   not needed here
context.lineTo(x, 240);

Answer 2

您希望使用#ccccff代替fillStyle使用rgba(100, 100, 255, 0.5)，其中最后一个数字是alpha或不透明度。它表示为小数，表示百分比;所以在这种情况下，这是50％的不透明度。