时间戳

首页 > 解决方案 > 我的画布没有显示在浏览器中

javascript - 我的画布没有显示在浏览器中

问题描述

由于某种原因，我的 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>

标签： javascriptcanvashtml5-canvas

解决方案

你的画布“在那里”——然而它只是一个白色（空）的斑点。

您与它的任何交互都不起作用，因为您尝试使用 ID“myCanvas”而不是“canvas”（您在 HTML 中使用的 ID）来查找它。

如果您更改此行：

canvas = document.getElementById("myCanvas")

至

canvas = document.getElementById("canvas")

它应该适合你

推荐阅读