javascript - 为什么动态创建的画布上下文不起作用？

Question

看：http: //jsfiddle.net/MrHIDEn/QYL3t/

这段代码绘制了 3 个框 Reg,Green,Blue 但来自 Blue 的 context("2d") 什么都不做。为什么？

HTML：

<div id="divR">
<canvas id="cvsR" width="100" height="100" style="border:1px solid red"></canvas>
</div>
<div id="divG"></div>
<div id="divB"></div>

Javascript：

var cvsR = document.getElementById("cvsR");
var ctxR = cvsR.getContext("2d");
ctxR.fillStyle = "red";
ctxR.fillRect(0, 0, 50, 75);

var divG = document.getElementById("divG");
divG.innerHTML = '<canvas id="cvsG" width="100" height="100" style="border:1px solid green"></canvas>';
var cvsG = document.getElementById("cvsG");
var ctxG = cvsG.getContext("2d");
ctxG.fillStyle = "green";
ctxG.fillRect(0, 0, 50, 75);

// Dynamiclly
var divB = document.getElementById("divB");
var cvsB = document.createElement("canvas");
cvsB.width = 100;
cvsB.height = 100;
cvsB.style.border = "1px solid blue";
cvsB.id = "cvsB";
var ctxB = cvsB.getContext("2d");
ctxB.fillStyle = "blue";
ctxB.fillRect(0, 0, 50, 75);
divB.innerHTML = cvsB.outerHTML;

Answer 1

您的问题在这里divB.innerHTML = cvsB.outerHTML;，使用此代码您不是将画布添加cvsB到 divB 而是与 .html 具有相同 html 的 can vas cvsB。要添加cvsB到 div 只需附加它

divB.appendChild(cvsB);

http://jsfiddle.net/QYL3t/14/

Answer 2

我会在阅读上下文之前附加画布，但没有这个它可以工作，所以这只是我个人的偏好：

cvsB.id = "cvsB";
divB.appendChild(cvsB);
var ctxB = cvsB.getContext("2d");
ctxB.fillStyle = "blue";
ctxB.fillRect(0, 0, 50, 75);