html - 使 html5 Canvas 变暗

Question

我在这里尝试使用 Canvas 图像作为背景: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);
}

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

我对 Canvas 很陌生，所以非常感谢各种帮助!

Answer 1

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

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

Here is an example jsFiddle

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