我有两个 Canvas ,它们使用 z-index 彼此重叠。
但我遇到了一个奇怪的问题:当我绘制到下部 Canvas 上方
的 Canvas 时,下部 Canvas 上绘制的内容将被删除。
我是这样做的:
CSS:
.c {
position: absolute;
left: 0;
top: 0;
width: 100 % ;
height: 500px;
margin: 0 auto;
border: 1px solid red;
}
JavaScript:
window.canvas = new Object();
for (var i = 1; i < 3; i++) {
document.getElementById("G").innerHTML += '<canvas id="layer' + i + '" class="c" style="z-index:' + i + ';" oncontextmenu="return false;"></canvas>';
temp = document.getElementById('layer' + i);
objname = 'canvas' + i;
canvas[objname] = temp;
canvas[objname].ctx = temp.getContext("2d");
}
function draw() {
canvas.canvas1.ctx.clearRect(0, 0, settings.width, settings.height);
canvas.canvas2.ctx.clearRect(0, 0, settings.width, settings.height);
abposx = 50;
abposy = 50;
//doesn't draw
canvas.canvas1.ctx.drawImage(gfx['ground'][0], abposx, abposy);
//draws
canvas.canvas2.ctx.drawImage(gfx['building'][0], abposx + 120, abposy + 120);
}
在上面的示例中,我只看到 canvas2
被绘制,如果我将 Canvas 一起移除,我就会看到 canvas1
被绘制。如果我将两个图像绘制到相同的
Canvas ,两个图像也会显示。
但是,如果我将一个绘制到 canvas1
,将另一个绘制到 canvas2
,我只能看到在 canvas2
和 canvas1 上绘制的内容
似乎被删除了。
为什么会这样?我不知道这是否会被其他尝试此操作的人复制,但它变得很烦人!我无法解决问题!非常感谢您的想法/建议/修复。
JSfiddle 问题:http://jsfiddle.net/xJZrQ/18/
最佳答案
看看这个:
document.getElementById("G").innerHTML += '<canvas id="layer'+i+'" class="c" style="z-index:'+i+';" oncontextmenu="return false;"></canvas>';
就像:
el.innerHTML += '...';
所以
el.innerHTML = el.innerHTML + '...';
现在你可能明白为什么你的代码不起作用了:当你第二次在循环中做这样的事情时,它会清除 #G
元素中的 innerHTML
,并更新它,并再次构建 DOM,因此用于绘制第一个 Canvas 的上下文已失效。
使用 DOM 而不是 innerHTML。演示:http://jsfiddle.net/mQuWF/
关于javascript - 绘制到第二个 Canvas 会取消第一个 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13794529/