更多内容请访问：??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????前言找个空闲时间，专注于时钟。一开始你会觉得流逝的只是滴答滴答，一分一秒，慢慢地你会觉得流逝的是你无声的生命。今天分享一个用canvas画时钟的方法，实现模拟时钟的功能。时钟时间与系统时间一致，刻度将24小时制转换为12小时制。效果展示二、Canvas属性及方法1、API链接地址：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-canvas-canvas-00000000006218082。案例中使用的属性和方法：3.创建画布。//hml部分//下面是JS代码constel=this.$refs.canvas;constctx=el.getContext('2d',{antialias:true});//绘图准备——画布中心点constcanvasX=JSON.stringify(el.style.width).replace(/[^0-9]/ig,"");constcanvasY=JSON.stringify(el.style.height).replace(/[^0-9]/ig,"");四、获取当前时间并转换为12constdate=newDate();consthour=date.getHours();常量分钟=date.getMinutes();constsecond=date.getSeconds();常数小时=小时>15?小时-16:小时+8;常量hh=小时>12?小时-12：小时；5.绘制表盘ctx.lineWidth=6;ctx.strokeStyle='#FFF';ctx.beginPath();//x,y,r,0~,true/false:正反画圆ctx.arc(Number(canvasX/2),Number(canvasY/2),Number(canvasX/2-20),数字(canvasX/2-110),0,true);ctx.closePath();ctx.stroke();第六，绘制分量表(vari=0;i<60;i++){ctx.save();ctx.lineWidth=2;如果（我<这个。第二个）{ctx.strokeStyle='rgba(6,235,0,0.5)';}elseif(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(varindex=0;index<12;index++){ctx.save();ctx.lineWidth=4;if((index*5)==this.second){ctx.strokeStyle='#06EB00';}else{ctx.strokeStyle='#FFF';}ctx.translate(数字(canvasX/2),数字(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,数字(canvasY/2-30));ctx.closePath();ctx.stroke();ctx.restore();}8.绘制时钟ctx.save();ctx.lineWidth=6;ctx.strokeStyle="#FFF";ctx.translate(数字(canvasX/2),数字(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(数字(canvasX/2),数字(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="红色";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,数字er(58-canvasX/2),4,0,360*Math.PI/180);ctx.stroke();ctx.restore();源码地址https://gitee.com/luopengrong/harmonyos/tree/clock总结此时可以得到静态时钟图，将第4步到第10步的代码封装到drawclock()函数中，setInterval()函数的功能是每1000ms运行一次drawclock()函数，这样每Draw一秒钟，就会显示时钟！希望这次分享对大家有所帮助。更多信息请访问：鸿蒙科技社区，与华为官方共建https://harmonyos.51cto.com
