使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";作为描述这个SO发布