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

问题描述

由于某种原因，我的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,canvas.width,canvas.height)
canvasContext.fillStyle = "red";
canvasContext.fillRect(125,250,75,75)
}
</script>
</body>
</html>

解决方法

您的画布“在”那里-只是一个白色（空）斑点。

与它的任何交互都无法正常工作，因为您尝试使用ID“ myCanvas”而不是HTML中使用的ID“ canvas”来找到它。

如果您更改此行：

canvas = document.getElementById("myCanvas")

到

canvas = document.getElementById("canvas")

它应该为您工作

这是问题的答案：

canvas = document.getElementById("canvas");

html5-canvas javascript