html5制作星星闪烁和制作时钟

最新推荐文章于 2025-07-08 13:52:08 发布

原创

最新推荐文章于 2025-07-08 13:52:08 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文分享了使用HTML5进行星星闪烁和时钟制作的学习经历。在学习过程中，遇到并解决了如getContext()报错和canvas显示问题。以下是实现效果的代码展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这次在w3和慕课网上学习html5制作了星星闪烁和时钟，期间也遇到了一些问题，比如getContext（）读不到数据，canvas不显示，好在通过百度还是查出来了，以下就是图片展示和代码：

1、星星闪烁图片展示

js代码：

var can;
var ctx;

var w;
var h;

var padLeft = 360;
var padTop = 100;

var girlWidth = 600;
var girlHeight = 300;

var deltaTime;
var lastTime;

var girlPic = new Image();
var starPic = new Image();

var stars = [];
var num = 60;

var alive = 0;

var switchy = false;

window.requestAnimFrame = (function() {
	return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
		function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
			return window.setTimeout(callback, 1000 / 60);
		};
})();


function init() {
	can = document.getElementById("canvas");
	ctx = can.getContext("2d");

	w = can.width;
	h = can.height;

	document.addEventListener('mousemove', mousemove, false);

	girlPic.src = "girl.jpg";
	starPic.src = "star.png";

	for (var i = 0; i < num; i++) {
		stars[i] = new starObj();
		stars[i].init();
	}

	lastTime = Date.now();
	gameLoop();
}

function gameLoop() {
	window.requestAnimF