爲什麼我的畫布上沒有任何東西出現？

Question

我是這樣一個noob，我不知道爲什麼我的畫布上沒有任何東西出現。有人可以幫我嗎？我想在我的畫布上放一個黑色的盒子，無論如何這就是它的意圖。

var canvas = document.createElement("canvas"); 
var ctx = canvas.getContext("2d"); 
canvas.width = 1040; 
canvas.height = 400; 
canvas.style.display='block'; 
canvas.style.marginLeft="auto"; 
canvas.style.marginRight="auto"; 

var mainFunction= function(){ 
ctx.fillStyle = "rgb(0, 0, 0)"; 
ctx.beginPath(); 
ctx.rect(0, 0, canvas.width, canvas.height); 
ctx.closePath(); 
ctx.fill(); 
requestAnimationFrame(mainFunction); 
}; 

mainFunction(); 

Answer 1

您已創建<canvas>元素，但未將其附加到DOM中的任何位置。也許你想要類似

document.body.appendChild(canvas); 

或另一合適的容器。

Answer 2

基本上，您沒有連接到DOM的畫布。

創建一個帶有<canvas id="root"></canvas>的html文件;

var canvas = document.getElementById("root");