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

Here is an example jsFiddle

您也可以按this SO post

中的说明使用context.globalAlpha或context.globalCompositeOperation = "lighter";

使html5画布变暗

1 个答案: