Canvas曲线与变换实现会动的钟表

Canvas曲线与变换

曲线

arc(x,y,radius,starAngle,endAngle,anticlockwise)

角度：(Math.PI/180)*degrees(度数)
以(x,y)为圆心，radius为半径的圆弧，从startAngle开始到endAngle结束的弧度，按照anticlockwise给定的方向(true:顺时针(默认)、false:逆时针)

ctx.beginPath()
ctx.moveTo()
圆:arc(x,y,radius,startAngle,endAngle,anticlockwise)/圆弧:arcTo(x1,y1,x2,y2,radius)
二次贝塞尔:quadraticCurveTo(cp1x,cp1y,x,y)/三次贝塞尔:bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
ctx.stroke()

起点为moveto时指定的点，(x,y)为结束点，(cp1x,cp1y),(cp2x,cp2y)为控制点

变换

translate(x,y):移动canvas的原点到(x,y)，translate是累加的
rotate(angle):以原点为中心顺时针方向旋转角度,rotate是累加的
scale(x,y):横轴和纵轴缩放因子，必须是正值。
scale实际是放大和缩小css像素的面积，即(x,y)大于1时，区域内css像素的个数变少；(x,y)大于1时，区域内css像素的个数变多。

会动的钟表

window.onload = function () {
        //获取画布
        var canvas = document.querySelector('#test')
        //检查支持性
        if (canvas.getContext) {
            //获取画笔
            var ctx = canvas.getContext("2d")
            setInterval(function () {
            //（以点(x,y)为起点，范围是(width, height)所有像素变成透明
            //并擦除之前绘制的所有内容的方法。
                ctx.clearRect(0, 0, canvas.width, canvas.height)
                move();
            }, 1000);
            move();

            function move() {
                ctx.save()
                //默认宽度
                ctx.lineWidth = 8
                //默认颜色
                ctx.strokeStyle = "white"
                //默认线条末端线帽的样式
                ctx.lineCap = "round"
                //移动原点至中心(200,200)位置
                ctx.translate(200, 200)
                //调整X,Y轴方向
                ctx.rotate(-90 * Math.PI / 180)
                //外层圆形
                ctx.save()
                ctx.lineWidth = 12
                ctx.beginPath()
                ctx.arc(0, 0, 140, 0, 360 * Math.PI / 180)
                ctx.stroke()
                ctx.restore()


                //时刻表盘
                ctx.save()
                for (var i = 0; i < 12; i++) {
                    ctx.rotate(30 * Math.PI / 180)
                    ctx.beginPath()
                    ctx.moveTo(100, 0)
                    ctx.lineTo(120, 0)
                    ctx.stroke()
                }
                ctx.restore()
                //分刻表盘
                ctx.save()
                ctx.lineCap = "square"
                ctx.strokeStyle = "blue"
                ctx.lineWidth = 4
                for (var i = 0; i < 60; i++) {
                    ctx.rotate(6 * Math.PI / 180)
                    if ((i + 1) % 5 != 0) {
                        ctx.beginPath()
                        ctx.moveTo(117, 0)
                        ctx.lineTo(120, 0)
                        ctx.stroke()
                    }
                }
                ctx.restore()
                //获取当前的时、分、秒
                var date = new Date()
                var s = date.getSeconds()
                var m = date.getMinutes() + s / 60
                var h = date.getHours() + m / 60
                h = h > 12 ? h - 12 : h
                //时针
                ctx.save()
                ctx.lineWidth = 12
                ctx.rotate(h * 30 * Math.PI / 180)
                ctx.beginPath()
                ctx.moveTo(-20, 0)
                ctx.lineTo(80, 0)
                ctx.stroke()
                ctx.restore()
                //分针
                ctx.save()
                ctx.rotate(m * 6 * Math.PI / 180)
                ctx.beginPath()
                ctx.moveTo(-28, 0)
                ctx.lineTo(112, 0)
                ctx.stroke()
                ctx.restore()
                //秒针
                ctx.save()
                ctx.lineWidth = 4
                ctx.strokeStyle = "red"
                ctx.fillStyle = "red"
                ctx.rotate(s * 6 * Math.PI / 180)
                ctx.beginPath()
                ctx.moveTo(-30, 0)
                ctx.lineTo(88, 0)
                ctx.stroke()
                //底座
                ctx.beginPath()
                ctx.arc(0, 0, 10, 0, 360 * Math.PI / 180)
                ctx.fill()
                //秒表头
                ctx.beginPath()
                ctx.arc(96, 0, 10, 0, 360 * Math.PI / 180)
                ctx.stroke()
                ctx.restore()

                ctx.restore()
            }
        }
    }

HTML部分

<canvas id="test" width="400" height="400">
        <!-- 替换内容 -->
        <span>您的浏览器不支持画布元素 请您换成谷歌浏览器</span>
    </canvas>

CSS部分

        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        body {
            background: white;
        }

        #test {
            background: black;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

结果图：