个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
尝试根据 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/
26
4
0
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and th
我试图用这种形式简单地获取数字 28 integer+space+integer+integer+space+integer我试过这个正则表达式 \\s\\d\\d\\s 但我得到了两个数字11 和
最近一直在学习D语言。我一直对运行时感到困惑。 从我能收集到的关于它的信息中，(这不是很多)我知道它是一种有助于 D 的一些特性的运行时。像垃圾收集一样，它与您自己的程序一起运行。但是既然 D 是编译
想问一下这两个正则表达式有区别吗？ \d\d\d 与 \d{3} 我已经在我的本地机器上使用 Java 和 Windows 操作系统对此进行了测试，两者都工作正常并且结果相同。但是，当在 linux
我正在学习 Go，而且我坚持使用 Go 之旅(exercise-stringer.go:https://tour.golang.org/methods/7)。 这是一些代码: type IPAddr
我在Java正则表达式中发现了一段令我困惑的代码: Pattern.compile( "J.*\\d[0-35-9]-\\d\\d-\\d\\d" ); 要编译的字符串是: String string
我在 ruby 代码上偶然发现了这个。我知道\d{4})\/(\d\d)\/(\d\d)\/(.*)/是什么意思，但是\1-\2-\3-\4 是什么意思？ 最佳答案 \1-\2-\3-\4 是 b
我一直在努力解决这个问题，这让我很恼火。我了解 D 运行时库。它是什么，它做什么。我也明白你可以在没有它的情况下编译 D 应用程序。就像 XoMB 所做的那样。好吧，XoMB 定义了自己的运行时，但是
我有两个列表列表，子列表代表路径。我想找到所有路径。 List> pathList1 List> pathList2 当然是天真的解决方案: List> result = new ArrayList>
我需要使用 Regex 格式化一个字符串，该字符串包含数字、字母 a-z 和 A-Z，同时还包含破折号和空格。 从用户输入我有02-219 8 53 24 输出应该是022 198 53 24 我正在
目标是达到与this C++ example相同的效果: 避免创建临时文件。我曾尝试将 C++ 示例翻译为 D，但没有成功。我也尝试过不同的方法。 import std.datetime : benc
tl;dr:你好吗perfect forwarding在 D？ 该链接有一个很好的解释，但例如，假设我有这个方法: void foo(T)(in int a, out int b, ref int c
有什么方法可以在 D 中使用abstract auto 函数吗？ 如果我声明一个类如下: class MyClass { abstract auto foo(); } 我收到以下错误: mai
有没有人为内存中重叠的数组切片实现交集？算法在没有重叠时返回 []。 当 pretty-print (使用重叠缩进)内存中重叠的数组切片时，我想要这个。 最佳答案 如果您确定它们是数组，那么只需取 p
我已经开始学习 D，但我在使用 Andrei Alexandrescu 所著的 The D Programming Language 一书中提供的示例时遇到了一些麻烦。由于 int 和 ulong 类
如何创建一个不可变的类？ 我的目标是创建一个实例始终不可变的类。现在我只是用不可变的方法和构造函数创建了一个“可变”类。我将其称为 mData，m 表示可变。然后我创建一个别名 alias immut
不久前我买了《The D Programming Language》。好书，很有教育意义。但是，我在尝试编译书中列出的语言功能时遇到了麻烦:扩展函数。 在这本书中，Andrei 写了任何可以像这样调用
我在 D http://www.digitalmars.com/d/2.0/lazy-evaluation.html 中找到了函数参数的惰性求值示例 我想知道如何在 D 中实现可能的无限数据结构，就像
这个问题在这里已经有了答案: 12 年前关闭。 Possible Duplicate: Could anyone explain these undefined behaviors (i = i++
当前是否可以跨模块扫描/查询/迭代具有某些属性的所有函数（或类）？ 例如： source/packageA/something.d: @sillyWalk(10) void doSomething()
我是一名优秀的程序员,十分优秀！