​
作者：王国菊

一、前言

找个空闲的时间，将目光聚焦到钟表上。开始你会感觉流逝的只是滴滴答答，一分一秒的时间，而慢慢的你会感觉到消逝的是你无声无息的生命。 给大家分享一个利用
canvas绘制时钟的写法，实现模拟时钟的功能，钟表时间与系统时间保持一致，刻度将24小时制转换为12小时制。

效果展示

二、canvas的属性、方法

1.API链接地址  

2.案例中使用到的属性和方法：

属性	方法
getContext()	返回一个用于在画布上绘图的环境
strokeStyle	画笔（绘制图形）颜色或者样式的属性
lineWidth	设置线段厚度的属性
save()	保存canvas全部状态的方法（入栈）
beginPath()	创建一个新的路径的方法
arc(原点x,原点y,半径,起始角度,结束角度,默认false顺时针)	绘制圆弧路径的方法
stroke()	绘制路径的方法
closePath()	闭合绘制路径
restore()	恢复到最近的保存状态的方法（出栈）
fillStyle	颜色和样式的属性

 

三、创建画布。

 

//hml部分

<canvas ref="canvas" style="width: 320px; height: 320px; background-color: #000;"></canvas>

//以下为JS代码

const el = this.$refs.canvas;

const ctx = el.getContext('2d',{ antialias: true });

 

//绘制的准备工作--画布的中心点

const canvasX = JSON.stringify(el.style.width).replace(/[^0-9]/ig,"");

const canvasY = JSON.stringify(el.style.height).replace(/[^0-9]/ig,"");

 

四、获取当前时间并转换为12小时制

 

const date = new Date();

const hour = date.getHours();

const minute = date.getMinutes();

const second = date.getSeconds();

const hours = hour > 15 ? hour - 16 : hour + 8;

const hh = hours > 12 ? hours - 12 : hours;

 

五、绘制表盘

 

ctx.lineWidth = 6;

ctx.strokeStyle = '#FFF';

ctx.beginPath();

// x,y,r,0~360,true/false：正反向画圆

ctx.arc(Number(canvasX/2), Number(canvasY/2), Number(canvasX/2 - 20), Number(canvasX/2 - 110), 0, true);

ctx.closePath();

ctx.stroke();

 

六、绘制分刻度

 

        for (var i = 0; i < 60; i++) {

                ctx.save();

                ctx.lineWidth = 2;

                if(i < this.second){

                    ctx.strokeStyle = 'rgba(6,235,0,0.5)';

                }else if(i == this.second){

                    ctx.strokeStyle = '#06EB00';

                }else{

                    ctx.strokeStyle = '#999';

                }

                ctx.translate(Number(canvasX/2), Number(canvasY/2))

                ctx.rotate(i * 6 * Math.PI / 180);

                ctx.beginPath();

                ctx.moveTo(0, Number(42 - canvasX/2));

                ctx.lineTo(0, Number(30 - canvasX/2));

                ctx.closePath();

                ctx.stroke();

                ctx.restore();

            }

 

七、绘制时刻度

 

        for (var index = 0; index < 12; index++) {

                ctx.save();

                ctx.lineWidth = 4;

                if((index * 5) == this.second){

                    ctx.strokeStyle = '#06EB00';

                }else{

                    ctx.strokeStyle = '#FFF';

                }

                ctx.translate(Number(canvasX / 2), Number(canvasY / 2));

                ctx.rotate((index+30) * 30 * Math.PI / 180) //角度*3.14/180=弧度

                ctx.beginPath();

                ctx.moveTo(0, Number(canvasX / 2 - 50));

                ctx.lineTo(0, Number(canvasY / 2 - 30));

                ctx.closePath();

                ctx.stroke();

                ctx.restore();

            }

 

八、绘制时钟

 

                ctx.save();

                ctx.lineWidth = 6;

                ctx.strokeStyle = "#FFF";

                ctx.translate(Number(canvasX/2), Number(canvasY/2));

                //如果时间不是整点，需要采用 h*6 + m*360 + s* 21600 ,来计算时针的偏移量

                ctx.rotate(this.hour * (Math.PI / 6) + this.minute  * (Math.PI / 360) + this.second * (Math.PI / 21600));

                ctx.beginPath();

                ctx.moveTo(0, Number(80 - canvasX/2));

                ctx.lineTo(0, Number(canvasX/2 - 145));

                ctx.closePath();

                ctx.stroke();

                ctx.restore();

 

九、绘制分钟

 

            ctx.save();

            ctx.lineWidth = 4;

            ctx.strokeStyle = "#FFF";

            ctx.translate(Number(canvasX/2), Number(canvasY/2));

            ctx.rotate(this.minute * 6 * Math.PI / 180);

            ctx.beginPath();

            ctx.moveTo(0, Number(60 - canvasX/2));

            ctx.lineTo(0, Number(canvasX/2 - 140));

            ctx.closePath();

            ctx.stroke();

            ctx.restore();

 

十、绘制秒钟

 

            ctx.save();

            ctx.lineWidth = 2;

            ctx.strokeStyle = "red";

            ctx.fillStyle = "red"

            ctx.translate(Number(canvasX/2), Number(canvasY/2));

            ctx.rotate(this.second * 6 * Math.PI / 180);

            ctx.beginPath();

            ctx.moveTo(0, Number(62 - canvasX/2));

            ctx.lineTo(0, Number(canvasX/2 - 130));

            ctx.closePath();

            ctx.stroke();

            //绘制中心红点

            ctx.beginPath();

            ctx.arc(0,0,4,0,360 * Math.PI / 180)

            ctx.fill();

            //绘制秒针头部的圆圈

            ctx.beginPath();

            ctx.arc(0,Number(58 - canvasX/2),4,0,360 * Math.PI / 180);

            ctx.stroke();

            ctx.restore();

总结

此时能得到一个静态时钟图，将步骤四到步骤十的代码封装成drawclock() 函数，采用setInterval()函数的功能，每1000ms，运行一次drawclock() 函数，这样就每一秒画一次,显示的就是时钟啦！本次分享希望对大家有所帮助。

更多原创内容请关注：中软国际 OpenHarmony 技术团队

入门到精通、技巧到案例，系统化分享OpenHarmony开发技术，欢迎投稿和订阅，让我们一起携手前行共建鸿蒙生态。

​