无法清除HTML 5中的画布怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (115)

我在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);
}

为什么会发生这种事?我遗漏了什么?

提问于
用户回答回答于

你应该包含HTML代码,因为不太清楚你的问题是什么,但我想出了一些问题。

“宽度”和“高度”可能是问题所在,你试过用峡谷宽度和峡谷高度来代替它们吗?

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#F00";
  ctx.fillRect(0, 0, 320, 180);
}

draw();
<canvas id="myCanvas" width=400 height=400></canvas>

扫码关注云+社区

领取腾讯云代金券