我在 HTML 页面中有几个分层的画布,我希望能够更改顶层,它显示用户可以选择的图像。
问题是,每当我调用 clearRect 时,它确实会清除画布片刻,然后将之前的图像加载回来。
这是我的 JavaScript 代码:
window.onload = function(){
init();
drawAll();
}
function clear(){
ctx2.clearRect(0,0,WIDTH,HEIGHT);
}
function init() {
city.src ="city.png";
image2.src="image.png";
layer1 = document.getElementById("layer1");
ctx1 = layer1.getContext("2d");
layer2 = document.getElementById("layer2");
ctx2 = layer2.getContext("2d");
}
function drawAll() {
draw1();
draw2();
}
function draw2() {
ctx2.clearRect(0,0,WIDTH,HEIGHT);
ctx2.drawImage(image2, 240, 200);
}
function draw1() {
ctx1.clearRect(0, 0, WIDTH, HEIGHT);
ctx1.drawImage(city, 0, 0);
}
为什么会这样?我错过了什么?