html5 canvas画布实现钟表

您所在的位置：网站首页 › html5钟表 › html5 canvas画布实现钟表

html5 canvas画布实现钟表

2023-06-29 05:35| 来源: 网络整理| 查看: 265

html5 canvas画布实现钟表

实现思路：先创建画布，在画布中创建一个圆，然后创建出时钟刻度和分钟刻度，以及时间，时针、分针、秒针所在的位置，用时间函数封装。

第一步：创建画布并创建圆

var cxt = myCanvas.getContext('2d'); function clock() { cxt.clearRect(0, 0, 400, 400); cxt.beginPath() //绘图开始路径 cxt.arc(200, 200, 150, 0, Math.PI * 2, true); //绘制圆 cxt.stroke(); cxt.closePath();

第二步：创建分钟刻度和时钟刻度

//小时刻度 for (var i = 0; i < 12; i++) { cxt.save(); //用来保存改变基点的位置 cxt.beginPath(); cxt.translate(200, 200); //改变画布基点 cxt.rotate(Math.PI / 6 * i); //旋转 cxt.moveTo(0, -150); cxt.lineTo(0, -130); cxt.lineWidth = "4"; cxt.stroke() cxt.closePath(); cxt.restore(); //恢复 } //分钟刻度 for (var i = 0; i < 60; i++) { cxt.save(); //用来保存改变基点的位置 cxt.beginPath(); cxt.translate(200, 200); //改变画布基点 cxt.rotate(Math.PI / 30 * i); //旋转 cxt.moveTo(0, -150); cxt.lineTo(0, -140); cxt.lineWidth = "3"; cxt.stroke() cxt.closePath(); cxt.restore(); //恢复 }

第三步：获取当前的时间

//获取时间 let date = new Date(); //获取当前时间 let hours = date.getHours(); //小时 let minutes = date.getMinutes(); //分钟 let seconds = date.getSeconds(); //秒 hours = hours + (minutes / 60);//小时=小时+当前的分钟数 let hours12 = hours > 12 ? hours - 12 : hours;

第四步：显示刻度对应的数字

//数字 for (var i = 1; i < 13; i++) { //1~12遍历 cxt.save(); //用来保存改变基点的位置 cxt.beginPath(); //开始创建路径 cxt.translate(200, 200); //改变基点 cxt.font = "20px Georgia"; //字体大小和样式 cxt.rotate(-Math.PI / 6 * (i - 1)); //旋转30度 cxt.fillText((13 - i), -7, -115); //填充内容为1~12的数字 cxt.closePath(); //结束路径 cxt.restore(); //恢复 }

第五步：创建秒针，分针，时针

//秒针 cxt.save() cxt.beginPath(); cxt.translate(200, 200); //改变基点 cxt.strokeStyle = "red"; //边框颜色 cxt.rotate(seconds * Math.PI / 30); //旋转秒数一次6度 cxt.moveTo(0, 0); cxt.lineTo(0, -80); cxt.stroke(); cxt.closePath(); cxt.restore(); //分针 cxt.save() cxt.beginPath(); cxt.translate(200, 200); //改变基地 cxt.strokeStyle = "blue"; cxt.lineWidth = "3"; cxt.rotate(minutes * Math.PI / 30); //旋转秒数一次6度 cxt.moveTo(0, 0); cxt.lineTo(0, -60); cxt.stroke(); cxt.closePath(); cxt.restore(); //时针 cxt.save() cxt.beginPath(); cxt.translate(200, 200); //改变基地 cxt.strokeStyle = "black"; cxt.lineWidth = "4"; cxt.rotate(hours * Math.PI / 6)//旋转秒数一次30度 cxt.moveTo(0, 0); cxt.lineTo(0, -40); cxt.stroke(); cxt.closePath(); cxt.restore(); } clock(); setInterval(function() { clock(); }, 1000);

以上就是钟表实现，样式可随以添加

【本文地址】

html5 canvas画布实现钟表

html5 canvas画布实现钟表

今日新闻

推荐新闻