画布不透明 - 更改默认背景颜色

Question

我正在使用canvas.getContext('2d', {alpha: false}); (wiki info) 来消除画布不透明度并提高动画性能。不幸的是，在那之后，画布元素获得了白色背景。是否可以更改画布背景/颜色的默认颜色？

我尝试drawImage() 填充整个区域，但是（因为动画）我认为这不是最好的解决方案：

var canvas = document.querySelector('#mycanvas'),
    ctx = canvas.getContext('2d', {alpha: false});

function run() {
    ctx.clearRect(0, 0, size.width, size.height);

    ctx.drawImage(bg, 0, 0, size.width, size.height);

    draw();
    update();

    requestAnimationFrame(run);
}

我真的很关心性能，所以只更改一次颜色会很有用。

有什么想法吗？

Answer 1

没有。默认背景始终为黑色。

Canvas 2D API 的 CanvasRenderingContext2D.clearRect() 方法 设置由起点 (x, y) 定义的矩形中的所有像素和 大小（宽度，高度）为透明黑色，擦除之前的任何 绘制的内容。

无需清除画布，只需将 fillRect 设置为填充所需的颜色即可。

var canvas = document.querySelector('#mycanvas'),
    ctx = canvas.getContext('2d', {alpha: false});

function run() {
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, size.width, size.height);

    draw();
    update();

    requestAnimationFrame(run);
}