canvas绘制表盘时钟_网络技术_宿州市腾雀网络科技有限公司

canvas绘制表盘时钟

发布时间 - 2026-01-10 22:44:54 点击率：次

话不多说，请看代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>canvas绘制表盘</title>
</head>
<body>
 <canvas id='box' width="500" height="500" >
 您的浏览器不支持canvas
 </canvas>
 <script>
 var box = document.getElementById('box');
 var cxt = box.getContext('2d');
 // 时钟动起来
 var timer = null;
 function clock(){
 var date = new Date();
 var h = date.getHours();
 h = h + h/60;
 h = h>12? h-12:h;
 var m = date.getMinutes();
 var s = date.getSeconds();
 // 清画布
 cxt.clearRect(0,0,500,500); 
 // 画表盘
 cxt.strokeStyle = '#f0f';
 cxt.lineWidth = 6;
 cxt.beginPath();
 cxt.arc(250,250,100,0,2*Math.PI);
 cxt.stroke();
 // 画时钟刻度
 for(var i=0; i<12; i++){
 cxt.save();
 cxt.translate(250,250);
 cxt.rotate(30*i*Math.PI/180);
 cxt.lineWidth = 3;
 cxt.beginPath();
 cxt.moveTo(0,-80);
 cxt.lineTo(0,-92);
 cxt.stroke();
 cxt.restore();
 }
 //画分钟刻度
 for(var i=0; i<60; i++){
 cxt.save();
 cxt.translate(250,250);
 cxt.rotate(6*i*Math.PI/180);
 cxt.lineWidth = 2;
 cxt.beginPath();
 cxt.moveTo(0,-86);
 cxt.lineTo(0,-92);
 cxt.stroke();
 cxt.restore();
 }
 // 画时针
 cxt.save();
 cxt.lineWidth = 5;
 cxt.translate(250,250);
 cxt.rotate(h*30*Math.PI/180);
 cxt.beginPath();
 cxt.moveTo(0,6);
 cxt.lineTo(0,-40);
 cxt.stroke();
 cxt.restore();
 // 画分针
 cxt.save();
 cxt.lineWidth = 3;
 cxt.translate(250,250);
 cxt.rotate(m*6*Math.PI/180);
 cxt.beginPath();
 cxt.moveTo(0,8);
 cxt.lineTo(0,-60);
 cxt.stroke();
 cxt.restore();
 // 画秒针
 cxt.save();
 cxt.lineWidth = 1;
 cxt.translate(250,250);
 cxt.rotate(s*6*Math.PI/180);
 cxt.beginPath();
 cxt.moveTo(0,10);
 cxt.lineTo(0,-75);
 cxt.stroke();
 cxt.restore();
 // 画中心的小圆固定三根针
 cxt.save();
 cxt.beginPath();
 cxt.fillStyle = '#0f0';
 cxt.lineWidth = 2;
 cxt.translate(250,250);
 cxt.arc(0,0,2,0,360,false);
 cxt.stroke();
 cxt.fill();
 cxt.restore();
 // 画秒针上的园
 cxt.save();
 cxt.fillStyle = '#f00';
 cxt.lineWidth = 2;
 cxt.translate(250,250);
 cxt.rotate(s*6*Math.PI/180);
 cxt.beginPath();
 cxt.arc(0,-60,2,0,360,false);
 cxt.stroke();
 cxt.fill();
 cxt.restore();
 }
 clock();
 timer = setInterval(clock,1000);
 </script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# canvas # 绘制 # 时钟 # html5 canvas js(数字时钟)实例代码 # JS+Canvas绘制时钟效果 # vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件 # 开箱即用） # js Canvas实现圆形时钟教程 # javascript结合Canvas 实现简易的圆形时钟 # JS+Canvas绘制动态时钟效果 # js+html5实现canvas绘制网页时钟的方法 # JavaScript html5 canvas绘制时钟效果(二) # JavaScript html5 canvas绘制时钟效果 # JavaScript canvas实现七彩时钟效果 # 小圆 # 您的 # 不支持 # 多说 # 画中 # 三根 # box # document # var # width # height # script # clock # function # Date

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Laravel开发：如何使用Laravel Echo和Pus

下一篇：企业网站制作服务包括哪些,千龙网是什么网站？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Laravel开发：如何使用Laravel Echo和Pus

下一篇：企业网站制作服务包括哪些,千龙网是什么网站？