利用canvas绘制时钟 h5页面

window.onload = function () { var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); // 绘制圆盘 function clock() { //绘制圆盘 context.beginPath(); context.arc(300, 300, 200, 0, Math.PI * 2); context.fillStyle = 'pink'; context.fill(); context.closePath(); //绘制时刻度 for (i = 0; i < 12; i++) { context.save(); context.lineWidth = 4; context.beginPath(); //将原点平移300,300 context.translate(300, 300); context.rotate(i * (Math.PI / 6)); context.moveTo(0, -180); context.lineTo(0, -200); context.stroke(); context.fillStyle = 'black'; context.rotate(Math.PI / 6); context.fillText(i + 1, -8, -220); context.closePath(); context.restore(); }//绘制分刻度 for (i = 0; i < 60; i++) { context.save(); context.lineWidth = 1; context.beginPath(); //将原点平移300,300 context.translate(300, 300); context.rotate(i * (Math.PI / 30)); context.moveTo(0, -190); context.lineTo(0, -200); context.stroke(); context.closePath(); context.restore(); }// 获取当前时间 var today = new Date(); var hour = today.getHours(); var min = today.getMinutes(); var sec = today.getSeconds(); // hour = hour + min / 60; // 绘制时针 context.lineWidth = 3 context.save(); context.translate(300, 300); context.rotate(hour * Math.PI / 6); context.beginPath(); context.moveTo(0, 10) context.lineTo(0, -80); context.stroke() context.closePath(); context.restore(); // 绘制分针 context.lineWidth = 2; context.save(); context.translate(300, 300); context.rotate(min * (Math.PI / 30)); context.beginPath(); context.moveTo(0, 10); context.lineTo(0, -100); context.stroke() context.closePath(); context.restore(); // 绘制秒针 context.lineWidth = 1; context.save(); context.translate(300, 300); context.rotate(sec * Math.PI / 30); context.beginPath(); context.moveTo(0, 10); context.lineTo(0, -120); context.strokeStyle = 'red'; context.stroke() context.closePath(); context.restore(); // 绘制交叉处 // context.lineWidth=1 context.save(); context.translate(300, 300); context.beginPath(); context.arc(0, 0, 5, 0, Math.PI * 2); context.fill(); context.fillStyle = '#ccc' context.strokeStyle = 'red' context.stroke() context.closePath(); context.restore(); setInterval(clock, 1000)//超时模拟间歇 } clock(); }

【利用canvas绘制时钟】效果图如下：

文章图片

利用canvas绘制时钟

推荐阅读

荣耀|双十一开门红荣耀智慧生活重回市场C位：双轮驱动重新定义标准

厨具品牌排行榜前十名燃气灶具品牌排行榜前十名

为什么威能壁挂炉定时运行怎么取消掉了解决步骤与方法？

可支配收入什么意思可支配收入的意思是什么

Vue|Vue 源码解读（11）—— render helper

婚姻里三观一致真的很重要

amos做路径分析,回归分析和amos路径分析

奶嘴乐是什么意思：安抚心理学麻醉边缘化人口的不满

生日攻击法如何防范生日攻击，如何防范生日攻击行为

男子盗窃被抓9次怎么处理？男子盗窃被抓求重判

使用线刷宝备份手机文件的详细操作步骤小编教你使用线刷宝备份手机文件的详细操作

WIFI测试仪,wifi测速app下载

天涯明月刀转职业怎么转

华为平板M5平板电脑内存坏了的故障处理方案

大豆品种1152特性，和黑河43区别黑河地区105天的大豆品种

《武林外传》据说里面被删除了六集,因为脑洞太大,这六集剧情是怎样的？

带团队，做企业，奖励小功，则大功立，小功不奖，大功不立！

金钱木风水金钱木风水卧室窗户禁忌

标杆|下半年旗舰标杆？iQOO 8 Pro“来者不善”

肺腑之言意思肺腑之言意思简单介绍