使用.innerHTML而不是.append()绘制两个画布

时间:2017-12-21 10:05:11

标签: javascript jquery html canvas

我想一个接一个地绘制两个画布,为什么当我使用.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

3 个答案:

答案 0 :(得分:4)

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

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

&#13;
&#13;
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;
&#13;
&#13;

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

&#13;
&#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;
&#13;
&#13;

编辑 - DocumentFragment

只是为了好玩,如果你真的想要类似jQuery的工作流程,你可以使用DocumentFragment来做这样的事情:

&#13;
&#13;
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;
&#13;
&#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>