我想一个接一个地绘制两个画布,为什么当我使用.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
答案 0 :(得分:4)
当您使用.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();
&#13;
<div id="mydiv"></div>
&#13;
为了让你的画布参数混合,我建议首先将画布加载到它自己的变量中:
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();
&#13;
<div id='mydiv'></div>
&#13;
编辑 - DocumentFragment
只是为了好玩,如果你真的想要类似jQuery的工作流程,你可以使用DocumentFragment来做这样的事情:
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();
&#13;
<div id="mydiv">
</div>
&#13;
答案 1 :(得分:1)
您可以使用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>
答案 2 :(得分:1)
您认为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>