JavaScript HTML5画布未显示

JavaScript HTML5 Canvas Not Showing

本文关键字：显示 布未 HTML5 JavaScript      更新时间：2023-09-26

我正在尝试使用HTML5和JavaScript创建一个简单的动画。我想使用我的原始代码中显示的做法，JS文件和html文件是分开的，但动画似乎不会显示在任何浏览器中。为什么？

index.html

<!DOCTYPE html>
<html>
<head>
    <meta http=equiv-"content-Type" content="text/html;charset=iso-8859-1">
    <title>My Animation</title>
</head>
<body>
    <canvas id="myCanvas" height="450" width="450">
        <p>Canvas not supported</p>
    </canvas>
    <script src="myAnimation.js"></script>
</body>
</html>

myAnimation.js

window.addEventListener('load', drawCircle);
drawCircle();
function drawCircle() {
  canvas = document.getElementById("myCanvas"),
  context = canvas.getcontext("2d"),
  context.clearRect(0, 0, canvas.width, canvas.height);
  // color in the background
  context.fillStyle = "#EEEEEE";
  context.fillRect(0, 0, canvas.width, canvas.height);
  // draw the circle
  context.beginPath();
  context.arc(225, 225, radius, 0, Math.PI * 2, false);
  context.closePath();
  // color in the circle
  context.fillStyle = "#006699";
  context.fill();
  requestAnimationFrame(drawCircle);
}

您发布的代码有几个错误：

1） 应该是canvas.getContext而不是canvas.getcontext（camelCase很重要）。

2） radius未定义。

以下是我进行这些更改时显示的内容。

下面是当我在函数顶部随机化radius时会发生的事情！

Groovy。

您没有定义radius并且拼错了getContext

查看这些工具-可能会有所帮助：

https://developer.chrome.com/devtools

或

https://developer.mozilla.org/en-US/docs/Tools/Debugger

相关文章：