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

Posted 2023-02-27

【中文标题】画布不透明 - 更改默认背景颜色

【英文标题】：Canvas opaque - change default background color

【发布时间】：2016-01-15 16:08:45

【问题描述】：

我正在使用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);

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

有什么想法吗？

【参考方案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);

【讨论】：

@Amay 那你做错了什么。这是一个小提琴jsfiddle.net/rrubqon6

没有。这个例子不是带有 clearRect() 的动画；

不错的更新，但仍然不是好主意 - 带有 fillRect() 的 fillStyle() 比 drawImage() 慢。