用JavaScript写抖音很火的罗盘时钟，附源码

最新推荐文章于 2023-04-21 22:13:50 发布

编程界小明哥

最新推荐文章于 2023-04-21 22:13:50 发布

阅读量9.8k

点赞数 27

分类专栏： canvas javascript javascript精彩实例文章标签：罗盘时钟 javascript canvas html5

本文链接：https://blog.csdn.net/dkm123456/article/details/115219368

版权

javascript精彩实例同时被 3 个专栏收录

24 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

javascript

78 篇文章

订阅专栏

canvas

42 篇文章

订阅专栏

这篇博客详细介绍了如何使用原生JavaScript和HTML5 canvas创建一个抖音热门的罗盘时钟，包括日期、月份、星期和时分秒的显示。通过一系列的构造函数和绘图方法，如文本、线段和圆的绘制，逐步构建出完整的时钟效果，并通过定时任务使其动态旋转。同时提供了源码下载链接。

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

原生js制作在抖音上很火的罗盘布局时钟代码。带日期、月份、星期、时分秒圆盘时钟。

效果图：

3个构造函数

文本构造函数

//文字的构造函数
	function Text(o){
		this.x=0,//x坐标
		this.y=0,//y坐标
		this.disX=0,//x坐标偏移量
		this.disY=0,//y坐标偏移量
		this.text='',//内容
		this.font=null;//字体
		this.textAlign=null;//对齐方式
		
		this.init(o);
	}
	
	Text.prototype.init=function(o){
		for(var key in o){
			this[key]=o[key];
		}
	}
	Text.prototype.render=function(context){
		this.ctx=context;
		innerRender(this);
			
		function innerRender(obj){
			var ctx=obj.ctx;
			ctx.save()
			ctx.beginPath();
			ctx.translate(obj.x,obj.y);
			if(