javascript - 使用 .innerHTML 而不是 .append() 绘制两个 Canvas

Question

我想一个接一个地绘制两个 Canvas ，为什么当我使用 .innerHTML 时这不起作用。在我的示例中，只绘制了第二个 Canvas

PS:它与 jquery 的 .append() 完美配合，但我没有在我的项目中使用 jquery

<script>
document.getElementById('mydiv').innerHTML += '<canvas id="canvas1" width="50" height="50"></canvas>'
var ctx = document.getElementById("canvas1").getContext("2d");
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(0,25);
ctx.lineTo(50,25);
ctx.stroke();

document.getElementById('mydiv').innerHTML += '<canvas id="canvas2" width="50" height="50"></canvas>'
var ctx2 = document.getElementById("canvas2").getContext("2d");
ctx2.strokeStyle = "red";
ctx2.beginPath();
ctx2.moveTo(0,25);
ctx2.lineTo(50,50);
ctx2.stroke();
</script>

<div id="mydiv">

</div

Answer 1

当您使用 .innerHTML 时，您实际上覆盖了该元素的整个内部 HTML。因此，您的第一个 Canvas 不再是您的第一个 ctx 变量指向的 Canvas 。

使用 var ctx = document.getElementById("id").appendChild(document.createElement("canvas")).getContext("2d") 来附加额外的 Canvas 而不重写整个 DOM。

var ctx = document.getElementById("mydiv").appendChild(document.createElement("canvas")).getContext("2d")
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.lineTo(50, 25);
ctx.stroke();

var ctx2 = document.getElementById("mydiv").appendChild(document.createElement("canvas")).getContext("2d")
ctx2.strokeStyle = "red";
ctx2.beginPath();
ctx2.moveTo(0, 25);
ctx2.lineTo(50, 50);
ctx2.stroke();

<div id="mydiv"></div>

为了混合使用 Canvas 参数，我建议先将 Canvas 加载到它自己的变量中:

var canvas = document.getElementById("mydiv").appendChild(document.createElement("canvas"));
canvas.id = "canvas1";
canvas.width = canvas.height = 50;
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.lineTo(50, 25);
ctx.stroke();
var canvas2 = document.getElementById("mydiv").appendChild(document.createElement("canvas"));
canvas2.id = "canvas2";
canvas2.width = canvas2.height = 50;
var ctx2 = canvas2.getContext("2d");
ctx2.strokeStyle = "red";
ctx2.beginPath();
ctx2.moveTo(0, 25);
ctx2.lineTo(50, 50);
ctx2.stroke();

<div id='mydiv'></div>

编辑 - DocumentFragment

只是为了好玩，你可以使用 DocumentFragment如果您真的想要一个类似 jQuery 的工作流程，请执行以下操作:

document.getElementById('mydiv').appendChild(document.createRange().createContextualFragment('<canvas id="canvas1" width="50" height="50"></canvas>'));
var ctx = document.getElementById("canvas1").getContext("2d");
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.lineTo(50, 25);
ctx.stroke();

document.getElementById('mydiv').appendChild(document.createRange().createContextualFragment('<canvas id="canvas2" width="50" height="50"></canvas>'));
var ctx2 = document.getElementById("canvas2").getContext("2d");
ctx2.strokeStyle = "red";
ctx2.beginPath();
ctx2.moveTo(0, 25);
ctx2.lineTo(50, 50);
ctx2.stroke();

<div id="mydiv">
</div>