html - 使html5画布变暗

Question

我在这里尝试使用画布图像作为背景：http ://www.cphrecmedia.dk/musikdk/stage/prelisten.php

代码如下：

window.onload=function(){
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var imageObj = new Image();
    stackBoxBlurImage('coverbgblur', 'canvas', 19, false, 2);
}

除了需要修复的布局内容外，我还需要将图像调暗一点，这样文本将始终可见，如果我使用白色专辑封面也是如此。我可以在上面的代码中以某种方式添加会使图像变暗的一行或 2 行吗？我知道我可以使用 CSS3，但是创建一个额外的处理层而不是第一次就做对似乎不明智。

我对画布很陌生，因此非常感谢各种帮助！

Answer 1

绘制图像后，您可以通过在图像上绘制一个半透明的深色矩形来使画布看起来更暗

context.fillStyle = "rgba(0, 0, 0, 0.4)";
context.fillRect(0, 0, 700, 500);

这是一个示例 jsFiddle

您也可以使用context.globalAlpha或context.globalCompositeOperation = "lighter";如this SO post中所述