1

見てください：http://jsfiddle.net/MrHIDEn/QYL3t/

このコードは、Reg、Green、Blue の 3 つのボックスを描画しますが、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;
4

2 に答える 2

4

あなたの問題はここdivB.innerHTML = cvsB.outerHTML;にあります。このコードでは、キャンバスcvsBを divB に追加していませんが、同じ html を持つことができcvsBます。cvsBdivに追加するには、それを追加するだけです

divB.appendChild(cvsB);

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

于 2013-06-08T22:12:56.510 に答える
1

コンテキストを読み取る前にキャンバスを追加しますが、これがなくても機能するため、これは私の個人的な好みです。

cvsB.id = "cvsB";
divB.appendChild(cvsB);
var ctxB = cvsB.getContext("2d");
ctxB.fillStyle = "blue";
ctxB.fillRect(0, 0, 50, 75);
于 2013-06-08T22:18:02.837 に答える