Javascript lineto相对于窗口而不是画布绘制

我正在试验在画布上使用绘图功能，我很好奇是否有人能提出解决方案，因为我是新手；）

我的主要html页面有两个画布，分层设置，这样我可以在不干扰其他页面的情况下操作和删除每个画布。我有这样的想法：

<div>
<canvas id="myCanvas" width="450" height="450" style="border:1px solid #d3d3d3;"></canvas>
<canvas id="layer1" width="450" height="450" style="position: absolute; left:0; top:0; z-index:1;"></canvas>
<canvas id="layer2" width="450" height="450" style="position: absolute; left:0; top:0; z-index:2;"></canvas>
<canvas id="layer3" width="450" height="450" style="position: absolute; left:0; top:0; z-index:3;"></canvas>
<canvas id="layer4" width="450" height="450" style="position: absolute; left:0; top:0; z-index:4;"></canvas>
</div>

现在这就行了；它在屏幕上绘制线条没有问题，只是它们不是在画布上绘制的，而是相对于主浏览器窗口绘制的（我的画布不在屏幕的左上角，但由于文本和其他图形的原因，稍微向下）。

---

有人能指出我做错了什么吗？

它对浏览器是真实的，因为你告诉它是相对于浏览器的。您需要使包装器元素的位置相对

CSS:

div.wrapper { position:relative;}
div.wrapper canvas { position : absolute; }

<div class="wrapper">
    <canvas id="myCanvas" width="450" height="450" style="border:1px solid #d3d3d3;"></canvas>
    <canvas id="layer1" width="450" height="450" style="z-index:1;background-color: red"></canvas>
    <canvas id="layer2" width="450" height="450" style="z-index:2;background-color:yellow;"></canvas>
</div>

HTML:

div.wrapper { position:relative;}
div.wrapper canvas { position : absolute; }

<div class="wrapper">
    <canvas id="myCanvas" width="450" height="450" style="border:1px solid #d3d3d3;"></canvas>
    <canvas id="layer1" width="450" height="450" style="z-index:1;background-color: red"></canvas>
    <canvas id="layer2" width="450" height="450" style="z-index:2;background-color:yellow;"></canvas>
</div>

JSFiddle:

div.wrapper { position:relative;}
div.wrapper canvas { position : absolute; }

<div class="wrapper">
    <canvas id="myCanvas" width="450" height="450" style="border:1px solid #d3d3d3;"></canvas>
    <canvas id="layer1" width="450" height="450" style="z-index:1;background-color: red"></canvas>
    <canvas id="layer2" width="450" height="450" style="z-index:2;background-color:yellow;"></canvas>
</div>

---

UM什么是

”style=“位置：绝对；左：0；排名：0；“

do？这是您的问题，它将它放在左上角！将背景颜色设置为红色或检查元素！您好，当我执行ctx.fillStyle=“#FF0000”ctx.fillRect（0,0150,75）时”；在与canvas1关联的ctx1中绘制一个红色试框。但是，当我删除上面提到的样式声明时，lineto段不会显示在原始myCanvas的右侧，而我正试图将它们堆叠在一起。谢谢。这似乎解决了这个问题！这是我试图维护的旧网页的一部分在：画布应该出现在一个表元素中，旁边有另一个表元素。画布会覆盖下一个表元素，这在画布包装设置为绝对值时是有意义的。你知道我如何解决这个问题吗？基本上是画布上的东西更多的东西抱歉fhtml的格式化在这种情况下不能正常工作，但希望您能看到它所说的内容；）