Javascript 我的画布未显示在浏览器中_Javascript_Canvas_Html5 Canvas

Javascript 我的画布未显示在浏览器中

javascript canvas html5-canvas

Javascript 我的画布未显示在浏览器中,javascript,canvas,html5-canvas,Javascript,Canvas,Html5 Canvas,出于某种原因，我的html5画布没有显示在浏览器中。我正试图画一个黑色的正方形它只是没有加载浏览器只是一个空白页。。。请帮帮我，我不知道怎么了 <html> <head> <title>setup</title> </head> <body> <canvas id="canvas" width="800" height="800"></canv

出于某种原因，我的html5画布没有显示在浏览器中。我正试图画一个黑色的正方形它只是没有加载浏览器只是一个空白页。。。请帮帮我，我不知道怎么了

<html>
<head>
<title>setup</title>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
<script>
var canvas
var canvasContext
window.onload = function() {
canvas = document.getElementById("myCanvas")
canvasContext = canvas.getContext("2d")
canvasContext.fillStyle = "black";
canvasContext.fillRect(0,0,canvas.width,canvas.height)
canvasContext.fillStyle = "red";
canvasContext.fillRect(125, 250, 75, 75)
}
</script>
</body>
</html>


设置
var画布
var canvasContext
window.onload=函数（）{
canvas=document.getElementById（“myCanvas”）
canvasContext=canvas.getContext（“2d”）
canvasContext.fillStyle=“黑色”；
canvasContext.fillRect（0,0，canvas.width，canvas.height）
canvasContext.fillStyle=“红色”；
canvasContext.fillRect（125250,75,75）
}

你的画布就在那里——但它只是一个白色（空）斑点

当您试图使用ID“myCanvas”而不仅仅是HTML中使用的ID“canvas”来查找它时，您与它的任何交互都不起作用

如果更改此行：

canvas = document.getElementById("myCanvas")

到

它应该适合您

这是问题的答案：

canvas = document.getElementById("canvas");

欢迎来到SO！您的画布是

id=“canvas”

，但您的选择器正在查找

myCanvas

。另外，如果您运行的脚本没有达到预期效果，请打开开发人员控制台查看错误。它几乎可以准确地告诉您问题是什么，并让您比在此处发布更快地解决问题。一般来说，如果答案包括对代码意图的解释，以及在不介绍其他代码的情况下解决问题的原因，那么答案会更有帮助。

canvas = document.getElementById("canvas");