使用.innerHTML而不是.append（）绘制两个画布

Question

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

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。因此，您的第一个画布不再是您的第一个ctx变量指向的画布。

使用var ctx = document.getElementById("id").appendChild(document.createElement("canvas")).getContext("2d")代替附加额外的画布而不重写整个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>

为了让你的画布参数混合，我建议首先将画布加载到它自己的变量中：

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

只是为了好玩，如果你真的想要一个类似jQuery的工作流程，你可以使用DocumentFragments做这样的事情：

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>

Answer 2

您可以使用document.createElement来创建画布。使用appendChild而不是直接修改innerHTML：

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

 
var canvas2 = document.createElement('canvas')
canvas2.id = "canvas2"
canvas2.width = 50
canvas2.height = 50 
document.getElementById('mydiv').appendChild(canvas2)
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>

Answer 3

您认为innerHTML是一些全局字符串，它将整个HTML内容表示为字符串。将innerHTML视为单向界面。将字符串放入其中后，将破坏整个原始HTML内容，并从头开始构建新内容。因此，在更改它之后，将删除原始画布（并替换为具有相同参数的新画布）。

我总是连续创建HTML字符串，然后将其设置为innerHTML一次。

<script>
var html = '<canvas id="canvas1" width="50" height="50"></canvas>';
html += '<canvas id="canvas2" width="50" height="50"></canvas>';
document.getElementById('mydiv').innerHTML = html;

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

var ctx2 = document.getElementById("canvas2").getContext("2d");
ctx2.strokeStyle = "red";
ctx2.beginPath();
ctx2.moveTo(0,25);
ctx2.lineTo(50,50);
ctx2.stroke();
</script>