canvas

前段时间做微信小程序项目，用到了微信canvas组件生成分享海报，很多东西都生疏了，就想着复习一下canvas的常用知识做一个clock出来。查阅canvas技术文档和相关资料，现将自己整理的代码和自己的理解记录在此，加深记忆，方便以后查阅。也希望有能看到本文的各位朋友批评指正。

代码之前先上效果图吧

微信截图_clock.png
代码扑面而来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画布-钟表</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <canvas id='clock' width='600' height='600' style="margin: 150px;"></canvas>
<script>                                         
    var canvas = document.getElementById('clock');
    const cxt = canvas.getContext('2d');
    var width = canvas.width;
    var height = canvas.height;
    var r = width / 2;
    function drawBg() { //画背景(表盘)
        //重置原点
        cxt.save();//保存当前状态
        cxt.translate(r,r);//重置坐标原点

        //画时钟外圈
        cxt.beginPath();//开始绘制
        cxt.arc(0, 0, r-8, 0, 2*Math.PI,true);//创建弧/曲线（用于创建圆或部分圆）
        cxt.lineWidth = 8;//线宽
        cxt.stroke();//路径(空心)
        //画小时数
        let  hour = [3,4,5,6,7,8,9,10,11,12,1,2];//弧的圆形的3点钟位置是 0 度
        //rad弧度：弧长与半径比 那么一个圆的弧度为2π，1弧度的弧长为半径
        //1°的弧长为2πr/360,那么1°的弧度为2π/360
        //360°/12 = 30° 数学公式正弦sin(角度),js则是sin(弧度),所以要计算出弧度
        // ↓ 小时数之间的弧度为 2π÷12 ↓
        let  hour_rad = 2*Math.PI/12;//小时数之间的弧度间隔
        cxt.font = "40px sans-serif";//字体
        cxt.textAlign = "center";//左右居中
        cxt.textBaseline = "middle";//上下居中
        
        let r1 = r - 65;//减短长度,让内容收到圆圈内部
        let r2 = r - 23;//减短长度,让内容收到圆圈内部
        //循环依次画出12个数字（从3点开始）
        for(var i in hour){
            cxt.fillStyle = "#000"
            cxt.fillText(hour[i],r1*Math.cos(i*hour_rad),r1*Math.sin(i*hour_rad))
        }
        //画刻度(圆点)
        let minute_rad = 2*Math.PI/60;//分钟之间的间隔弧度
        for(i = 0; i <= 60; i ++) {
            let x = r2*Math.cos(i*minute_rad);
            let y = r2*Math.sin(i*minute_rad);
            cxt.beginPath();
            if(i % 15 == 0){//每刻钟位置
                cxt.fillStyle = "red";//文本字体颜色
                cxt.arc(x ,y , 5, 0, 2*Math.PI, true);
            }
            else if(i % 5 == 0){//整点位置
                cxt.fillStyle = "#000";
                cxt.arc(x ,y , 4, 0, 2*Math.PI, true);
            }
            else{//普通位置
                cxt.fillStyle = "#bbb";
                cxt.arc(x ,y , 3, 0, 2*Math.PI, true);
            }
            cxt.fill();//填充(实心)
        }
        //画时钟内圈
        cxt.beginPath();
        cxt.arc(0, 0, r-32, 0, 2*Math.PI,true);
        cxt.lineWidth = 3;
        cxt.stroke();//线条、线性路径
    }
    
    //画时针
    function drawHour(hour,minute,second) {
        cxt.save();//保存当前
        var rad = 2 * Math.PI * ( hour/12 + minute/720 + second/43200);

        cxt.beginPath();
        cxt.rotate(rad);//旋转角度
        cxt.moveTo(0, 10);
        cxt.lineTo(0, -r/2);
        cxt.lineWidth = 10;
        cxt.lineCap = "round";//线段末端样式
        cxt.stroke();
        cxt.restore();//恢复上一步保存的状态
    }
    
    //画分针
    function drawMinute(minute,second) {
      cxt.save();
      var rad = 2 * Math.PI * (minute/60 + second/3600);
      cxt.beginPath();
      cxt.rotate(rad);//旋转角度
      cxt.moveTo(0, 15);
      cxt.lineTo(0, -r/1.5);
      cxt.lineWidth = 6;
      cxt.lineCap = "round";
      cxt.stroke();
      cxt.restore();
    }
    
    // 画秒针
    function drawSecond(second) {
      cxt.save();
      var rad = 2 * Math.PI * (second / 60) ;
      cxt.beginPath();
      cxt.rotate(rad);
      cxt.moveTo(0, 25);
      cxt.lineTo(2, 25);
      cxt.lineTo(-2, 25);
      cxt.lineTo(-1, -r/1.25);
      cxt.lineTo(1, -r/1.25);
      cxt.lineTo(2, 25);
      cxt.lineWidth = 2;
      cxt.fillStyle = "#f00";
      cxt.fill();
      cxt.restore();
    }
    
    // 画中心点
    function drawDot() {
      cxt.beginPath();
      cxt.arc(0, 0, 8, 0, 2*Math.PI,true);
      cxt.fillStyle = "red";
      cxt.fill();
    }
    
    //把所有方法每秒调用一下,表就走起来了
    setInterval(function(){
        //获取时分秒
        let second = new Date().getSeconds();
        let minute = new Date().getMinutes();
        let hour = new Date().getHours();
        cxt.clearRect(0, 0, width, height);//每次清除所有
        //再重新画出所有
        drawBg();//表盘 数字 刻度
        drawHour(hour,minute,second);//时针
        drawMinute(minute,second);//分针
        drawSecond(second);//秒针
        drawDot();//中心圆点
        cxt.restore();
    },1000)
</script>
</body>
</html>