canvas-表盘实例

<script type="text/javascript">
    window.onload = function () {
        /** @type {HTMLCanvasElement} */
        var flag = 0;
        var scale = 0;
        var flagScale = 0;
        //1.获取画布
        var canvas = document.querySelector('#test');
        if (canvas.getContext) {
            //2.获取画笔
            var ctx = canvas.getContext('2d');

            ctx.save();
            //初始化圆盘样式
            ctx.lineWidth = 8;
            ctx.strokeStyle = 'black';
            ctx.lineCap = 'round'
            ctx.translate(200, 200);
            ctx.rotate(-90 * Math.PI / 180);
            ctx.beginPath();

            //外层空心圆盘
            ctx.save();
            ctx.lineWidth = 14;
            ctx.strokeStyle = '#325FA2';
            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);//canvas中rotate的变化是累加的
                ctx.beginPath();
                ctx.moveTo(100, 0);
                ctx.lineTo(120, 0);
                ctx.stroke();
            }
            ctx.restore();

            //分针刻度
            ctx.save();
            ctx.lineWidth = 4;
            for (var i = 0; i < 60; i++) {
                if (i % 5 != 0) {
                    ctx.beginPath();
                    ctx.moveTo(117, 0);
                    ctx.lineTo(120, 0);
                    ctx.stroke();
                } 
                ctx.rotate(6 * Math.PI / 180);
            }
            ctx.restore();

            ctx.restore();
        }
    }
</script>