Canvas over a Canvas

Question

我想繪製一些東西（例如一個矩形）到畫布中，每個循環都會移動。我想繪製一個背景（例如背景將是藍色），但是我只想繪製背景一次。所以我認爲我會將背景畫成一幅畫布，然後將其繪製到其他畫布上，並且cnavas的背景將是透明的。

這可能嗎？

如何設置第二畫布是透明的，這樣你可以看到矩形移動（而不是複製它自監守你可以看到前面的rects）

Answer 1

您應該繪製背景位圖一次。然後在每次循環迭代中將該位圖繪製到畫布中。

Answer 2

你只需有兩個帆布彼此堆疊使用的z-index

<canvas id="background" style="position: absolute; top:0px; left:0px; z-index:-1"></canvas> 
<canvas id="foreground" style="position: absolute; top:0px; left:0px; z-index:0"></canvas> 

然後在你的JavaScript代碼，只需調用爲每個特定的帆布分別

var backgroundCanvas = document.getElementById("background"); 
var ctxBackgroundCanvas = backgroundCanvas.getContext("2d"); 

var foregroundCanvas = document.getElementById("foreground"); 
var ctxForegroundCanvas = foregroundCanvas .getContext("2d"); 

function paintBackground() { 
//paint background here using ctxBackgroundCanvas 
} 

function paintForeground() { 
//paint foreground here using ctxForegroundCanvas 
} 

在開始每次重繪前景時，請勿使用fillRect，而應使用clearRect，這會使其透明。