帆布不透明 - 更改默認背景顏色

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

否。默認背景始終爲黑色。

畫布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); 
}