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，这会使其透明。