用 alpha 颜色覆盖 canvas 的部分图像

Question

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

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 来覆盖我的半透明蓝色。

我在 Whosebug 上找到了这个：

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

从这个 link:Another example 但这不会给我我想要的。我怎样才能达到我想要的？

谢谢

Answer 1

只需使用 rgba() 将 fillStyle 设置为透明颜色，然后 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

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

用 alpha 颜色覆盖 canvas 的部分图像

overlay part of image of canvas with an alpha color

javascript

html5-canvas