无法清除HTML5中的画布
无法清除HTML5中的画布
提问于 2012-05-22 19:33:41
我有一个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);
}为什么会发生这种情况？我遗漏了什么？
回答 1
Stack Overflow用户
发布于 2018-07-04 06:14:38
您应该包含HTML代码，因为它有点不清楚您的问题是什么，但这是我想出来的。
“宽”和“高”可能是这里的麻烦制造者。你有没有试过用canvas.width和canvas.height替换它们？
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10701208
复制相关文章
相似问题