Question

尝试从Youtube上的教程创建HTML5 Canvas时钟时。我按照说明进行了演示，我无法在自己的浏览器（Safari 8.0.7和FireFox 39.0.3）上查看我的时钟，它显示一个空白屏幕 - 就像那里没有代码一样。在Safari中查看开发人员菜单（Inspect Element）后，我的JavaScript代码被告知此错误消息：

TypeError：null不是对象（评估'myVariable.getContext'）

看到这个之后，我决定放置消息框“断点”来发现代码停止执行的位置。我学会了使用那种方法确实与getContext（“2d”）方法有关。

我想借此机会与您分享我的代码。请注意，有一个循环能够每40毫秒刷新一次这个时钟，以便从秒钟时钟获得平滑的运动。

这是我的代码：

window.alert("1");
/*Status -- Worked*/
var c = document.getElementById("canvas");
window.alert("2");
/*Status -- Worked*/
var ctx = c.getContext("2d");
window.alert("3");
/*Status -- Failed to show in Safari*/

ctx.strokeStyle = "28d1fa";
ctx.lineWidth = 17;
ctx.shadowBlur = 15;
ctx.shadowColor = "28d1fa";

function degToRad(degree) {
  "use strict";
  var factor = Math.PI / 180;
  return degree * factor;
}

function renderTime() {
  //Variables
  "use strict";
  var now = new Date();
  var today = now.toDateString();
  var time = now.toLocaleTimeString();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  var milliseconds = now.getMilliseconds();
  var newSeconds = seconds * (milliseconds / 1000);

  //Background
  gradient = ctx.createRadialGradient(250, 250, 5, 250, 250, 300);
  gradient.addColorStop(0, "09303a");
  gradient.addColorStop(1, "black");
  ctx.fillStyle = gradient;
  ctx.fillStyle = "333333";
  ctx.fillRect(0, 0, 500, 500);

  //Hours
  ctx.beginPath();
  ctx.arc(250, 250, 200, degToRad(270), degToRad((hours * 15) - 90));
  ctx.stroke();

  //Minutes
  ctx.beginPath();
  ctx.arc(250, 250, 170, degToRad(270), degToRad((minutes * 6) - 90));
  ctx.stroke();

  //Seconds
  ctx.beginPath();
  ctx.arc(250, 250, 140, degToRad(270), degToRad((newSeconds * 6) - 90));
  ctx.stroke();

  //Date
  ctx.font = "25px Arial bold";
  ctx.fillStyle = "28d1fa";
  ctx.fillText(today, 175, 250);

  //Time
  ctx.font = "15px Arial";
  ctx.fillStyle = "28d1fa";
  ctx.fillText(time, 175, 280);


}

setInterval(renderTime, 40);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Project</title>
</head>

<body>
  <script type="text/javascript" src="script/script.js"></script>
  <canvas id="canvas" width="500" height="500"></canvas>
</body>
</body>

</html>

在您方便的时候，您能协助我解决这个问题吗？

非常感谢。

感谢您的时间。

此致

编码206

Answer 1

问题是您在加载画布之前加载JavaScript，因为<script>标记位于页面的上方。

在画布后加载JavaScript，document.getElementById("canvas");将不是null，因为画布已经加载到页面上。

<body>
  <canvas id="canvas" width="500" height="500"></canvas>
  <script type="text/javascript" src="script/script.js"></script>
</body>

Answer 2

在尝试执行javascript之前，您应该等待页面加载。

所以将你的javascript代码包装在里面：

window.onload=function(){

    ... your code ...

}

Answer 3

谢谢Robin James Kerrison和markE。

To：Robin James Kerrison

非常感谢您的澄清！这将在未来帮助我！

收件人：markE

感谢您的帮助，当出现问题时，这是我的备份;）

致：每个人

由于上面提到的Stack Overflow用户很好，这是我的代码处于正常工作状态。

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

ctx.strokeStyle = "28d1fa";
ctx.lineWidth = 17;
ctx.shadowBlur = 15;
ctx.shadowColor = "28d1fa";

function degToRad(degree) {
  var factor = Math.PI / 180;
  return degree * factor;
}

function renderTime() {
  //Variables
  var now = new Date();
  var today = now.toDateString();
  var time = now.toLocaleTimeString();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  var milliseconds = now.getMilliseconds();
  var newSeconds = seconds + (milliseconds / 1000);

  //Background
  var gradient = ctx.createRadialGradient(250, 250, 5, 250, 250, 300);
      gradient.addColorStop(0, "09303a");
      gradient.addColorStop(1, "black");
  ctx.fillStyle = gradient;
  ctx.fillStyle = "333333";
  ctx.fillRect(0, 0, 500, 500);

  //Hours
  ctx.beginPath();
  ctx.arc(250, 250, 200, degToRad(270), degToRad((hours * 15) - 90));
  ctx.stroke();

  //Minutes
  ctx.beginPath();
  ctx.arc(250, 250, 170, degToRad(270), degToRad((minutes * 6) - 90));
  ctx.stroke();

  //Seconds
  ctx.beginPath();
  ctx.arc(250, 250, 140, degToRad(270), degToRad((newSeconds * 6) - 90));
  ctx.stroke();

  //Date
  ctx.font = "25px Arial bold";
  ctx.fillStyle = "28d1fa";
  ctx.fillText(today, 175, 250);

  //Time
  ctx.font = "15px Arial";
  ctx.fillStyle = "28d1fa";
  ctx.fillText(time, 175, 280);


}

setInterval(renderTime, 40);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Project</title>
        <link rel=""
    </head>
    <body>
        <canvas id="canvas" width="500" height="500"></canvas>
        <script src="script/script.js"></script>
    </body>
</body>
</html>

HTML5 Canvas Drawing GetContext（“2d”） - Null不是对象（variable.getContext）

3 个答案: