Javascript 为什么我的画布上什么都没有？

我就是这样一个傻瓜，我不知道为什么我的画布上什么都没有出现。有人能帮我吗？我想在我的画布上有一个黑盒子，这就是我的意图

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();

您已经创建了

元素，但尚未将其附加到DOM中的任何位置。也许你想要像这样的东西

document.body.appendChild(canvas);

或者另一个合适的容器。

您已经创建了一个

元素，但没有将其附加到DOM中的任何位置。也许你想要像这样的东西

document.body.appendChild(canvas);

---

或者另一个合适的容器。

基本上，您没有连接到DOM的画布

使用

创建html文件

---

var canvas=document.getElementById（“根”）
基本上，您没有连接到DOM的画布

使用
创建html文件

var canvas=document.getElementById（“根”）