gpt4 book ai didi

javascript - HTML5 Canvas 绘图 GetContext ("2d") - Null 不是对象 (variable.getContext)

转载 作者:行者123 更新时间:2023-12-02 15:49:19 24 4
gpt4 key购买 nike

尝试根据 Youtube 上的教程创建 HTML5 Canvas 时钟时。我按照说明进行了整个演示,但无法在自己的浏览器(Safari 8.0.7 和 FireFox 39.0.3)上查看时钟,它显示空白屏幕 - 就像那里没有代码一样。在 Safari 中查看开发人员菜单(检查元素)后,我通过 JavaScript 代码得知此错误消息:

<小时/>

类型错误: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

最佳答案

问题是您在加载 Canvas 之前加载 JavaScript,因为 <script>标签位于页面上方。

在 Canvas 和 document.getElementById("canvas"); 之后加载 JavaScript不会null因为 Canvas 已经加载到页面上。

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

关于javascript - HTML5 Canvas 绘图 GetContext ("2d") - Null 不是对象 (variable.getContext),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31952096/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com