#夏日挑战赛# HarmonyOS canvas实现时钟 原创 精华

<div class="container">
    <canvas ref="clock" style="width: 600px; height:600px; background-color:#5a5a5a "></canvas>
</div
1.
2.
3.

export default {
  data: {
      c:'',
      ctx:''
  }
 }
1.
2.
3.
4.
5.
6.

onShow(){
  this.el = this.$refs.clock;
        //获取canvas绘图上下文
  this.ctx = this.el.getContext('2d');
  this.initData()
},
1.
2.
3.
4.
5.
6.

  initData:function(){
    this.updateClock(this.ctx)
  },
1.
2.
3.

 drawPanel:function(ctx){
      ctx.beginPath()  //开始
      ctx.arc(300, 300, 200, 0, Math.PI * 2) //绘制弧线路径
      ctx.fillStyle = 'white' //填充颜色
      ctx.fill() //填充
      ctx.closePath()  //闭合
    },
1.
2.
3.
4.
5.
6.
7.

  hourCalibration:function(ctx){
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; //定义刻度的数字
        ctx.beginPath(); //开始
        ctx.translate(300, 300) //移动当前坐标系的原点
        ctx.font = '30px bold' //文字的大小
        ctx.textAlign = "center"; // 文字居中
        ctx.textBaseline = "middle"; // 设置文本绘制中的水平对齐方式 为文本块的中间
        ctx.fillStyle = "black"; // 填充颜色
        for (var i = 0; i < arr.length; i++) {
//绘制填充类文本
          ctx.fillText(
            arr[i],
            168 * Math.cos(((i * 30 - 60) * Math.PI) / 180),
            168 * Math.sin(((i * 30 - 60) * Math.PI) / 180)
          );
        }
        ctx.closePath(); // 结束
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

 centerDot:function(ctx){
        ctx.beginPath(); // 开始
        ctx.arc(0, 0, 8, 0, 2 * Math.PI); //绘制弧线路径
        ctx.fill(); //对封闭路径进行填充
        ctx.beginPath(); //开始
        ctx.fillStyle = "white";
        ctx.arc(0, 0, 5, 0, 2 * Math.PI); //绘制弧线路径
        ctx.fill();//对封闭路径进行填充
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.

 getTimeStamp:function(){
    var zoneOffset = 8;
    //算出时差,并转换为毫秒：
    var offset2 = new Date().getTimezoneOffset()* 60 * 1000;
    //算出现在的时间：
    var nowDate2 = new Date().getTime();
    //此时东八区的时间
    var currentZoneDate = new Date(nowDate2 + offset2 + zoneOffset*60*60*1000);
    return currentZoneDate;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

//修改时间 默认获取的是格林威治时间 需要将时间转化为北京时间才行
var date = this.getTimeStamp(new Date())
//获取当前的小时
var hours = date.getHours()
console.log(hours+'hours')
//获取当前分钟
var minutes = date.getMinutes()
console.log(minutes+'minutes')
//获取当前秒数
var seconds = date.getSeconds()
console.log(seconds+'seconds')
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

  hourHand:function(ctx,hours, minutes){
        var radius =
          ((2 * Math.PI) / 12) * hours + (((1 / 6) * Math.PI) / 60) * minutes;
        ctx.save();// 保存当前状态，为了旋转后能回到当初状态。
        ctx.beginPath(); //开始
        ctx.lineWidth = 8;         // 针的宽度
        ctx.lineCap = "round";          // 针头为圆角
        ctx.strokeStyle = "green"; //针的颜色
        ctx.rotate(radius); // 旋转
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -90);
        ctx.stroke();
        ctx.closePath() // 结束
        // 回到保存的状态
        ctx.restore();
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

 minuteHand:function(ctx,minutes){
        2 * Math.PI;
        var radius = ((2 * Math.PI) / 60) * minutes;
        ctx.save(); // 保存当前状态，为了旋转后能回到当初状态。
        ctx.beginPath(); //开始
        ctx.lineWidth = 4; // 针的宽度
        ctx.lineCap = "round"; //针头为圆角
        ctx.strokeStyle = "black";
        ctx.rotate(radius); //旋转
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -110);
        ctx.stroke(); //绘制轮廓圆
        ctx.closePath() //结束
        ctx.restore();
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

secondHand:function(ctx,seconds) {
        var radius = ((2 * Math.PI) / 60) * seconds;
        ctx.save(); // 保存当前状态，为了旋转后能回到当初状态。
        ctx.beginPath(); //开始
        ctx.lineWidth = 2; // 针的宽度
        ctx.lineCap = "round"; //针头为圆角
        ctx.strokeStyle = "red";
        ctx.rotate(radius); //旋转
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -140);
        ctx.stroke();//绘制轮廓圆
        ctx.closePath() //结束
        ctx.restore();
      },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

updateClock:function(ctx){
    var time = this.getTimeStamp(new Date())
    var hours = time.getHours();
    var minutes = time.getMinutes();
    var seconds = time.getSeconds();
    ctx.save();
    this.drawPanel(this.ctx);
    this.hourCalibration(this.ctx);
    this.secondHand(this.ctx,seconds);
    this.minuteHand(this.ctx,minutes);
    this.hourHand(this.ctx,hours, minutes);
    this.centerDot(this.ctx)
    ctx.closePath();
    ctx.restore();
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

initData:function(){
        //    定时器一分钟刷新一次时间
        let timer = setInterval(()=>{
        this.ctx.clearRect(0, 0, 600, 600); //删除指定区域内的绘制内容。
        this.updateClock(this.ctx)
        },1000)
    },
1.
2.
3.
4.
5.
6.
7.