創建HTML5畫布編程

我有以下的HTML代碼片段創建HTML5畫布編程

<body onload="main()" > 
    ... 
    <canvas id="myId" class="myClass"></canvas> 
    ... 
</body>

它將按預期工作。我可以正確顯示輸出。

我再取出

<canvas id="myId" class="myClass"></canvas>

因爲我想用下面的JavaScript代碼編程的方式創建它片斷

var canvas = document.createElement("canvas"); 
canvas.className = "myClass"; 
canvas.id = "myId";

不幸的是，它沒有工作。我無法用這個顯示任何東西。

我想知道如果我錯過了什麼。任何幫助表示讚賞。在此先感謝您的幫助。

2011-01-22 pion

您需要實際將畫布附加到文檔。在這樣做之前，它只是瀏覽器不呈現的分離元素。

var canvas = /* ... */; 
/* ... */ 
document.getElementsByTagName('body')[0].appendChild(canvas);

2011-01-22 03:23:28

@Ben，@馬特 - 這兩種解決方案的工作。已經投票給他們兩個。非常感謝！ – pion 2011-01-22 04:03:06

您需要將新的<canvas>元素插入到DOM中。把它放在身體的盡頭，使用：

document.body.appendChild(canvas);

與創建它的代碼。（如果您想將其放入不同的元素中，請使用該元素代替document.body。）

2011-01-22 03:23:28

回答