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

Question

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

此代码绘制3个框Reg，Green，Blue但来自Blue的上下文（“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，而是使用与cvsB相同的html。要将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);