Canvas绘制出时钟的代码示例

nbsp;html&gt;    <meta>    <meta>    <meta>    <title>Document</title>    <style>        div {            text-align: center;            margin-top: 250px;        }    </style>    <div>        <canvas>你的浏览器不支持canvas</canvas>    </div>    <script>        var dom = document.getElementById(&#39;clock&#39;);        var ctx = dom.getContext(&#39;2d&#39;);        var width = ctx.canvas.width;        var height = ctx.canvas.height;        var r = width / 2;        //绘制表盘        function drawBackground() {            ctx.save();            ctx.translate(r, r);            ctx.beginPath();            ctx.lineWidth = 10;            ctx.arc(0, 0, r - 5, 0, 2 * Math.PI, false);            ctx.stroke();            var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];            ctx.font = &#39;18px Arial&#39;;            ctx.textAlign = &#39;center&#39;;            ctx.textBaseline = &#39;middle&#39;;            //小时数字            hourNumbers.forEach(function (number, i) {                var rad = 2 * Math.PI / 12 * i;                var x = Math.cos(rad) * (r - 30);                var y = Math.sin(rad) * (r - 30);                ctx.fillText(number, x, y);                // console.log(x)            })            //绘制分刻度            for (var i = 0; i < 60; i++) {                var rad = 2 * Math.PI / 60 * i;                var x = Math.cos(rad) * (r - 18);                var y = Math.sin(rad) * (r - 18);                ctx.beginPath();                if (i % 5 == 0) {                    ctx.fillStyle = &#39;#000&#39;;                    ctx.arc(x, y, 2, 0, 2 * Math.PI, false);                } else {                    ctx.fillStyle = &#39;#ccc&#39;;                    ctx.arc(x, y, 2, 0, 2 * Math.PI, false);                }                ctx.fill();            }        }        //绘制时针        function drawHour(hour, minute) {            ctx.save();            ctx.beginPath();            var rad = 2 * Math.PI / 12 * hour;            var mrad = 2 * Math.PI / 12 / 60 * minute;            ctx.rotate(rad + mrad);            ctx.lineWidth = 6;            ctx.lineCap = &#39;round&#39;;            ctx.moveTo(0, 10);            ctx.lineTo(0, -r / 2);            ctx.stroke();            ctx.restore();        }        //绘制分针        function drawMinute(minute) {            ctx.save();            ctx.beginPath();            var rad = 2 * Math.PI / 60 * minute;            ctx.rotate(rad);            ctx.lineWidth = 3;            ctx.lineCap = &#39;round&#39;;            ctx.moveTo(0, 10);            ctx.lineTo(0, -r + 30);            ctx.stroke();            ctx.restore();        }        //绘制秒针        function drawSecond(second) {            ctx.save();            ctx.beginPath();            ctx.fillStyle = &#39;red&#39;            var rad = 2 * Math.PI / 60 * second;            ctx.rotate(rad);            ctx.moveTo(-2, 20);            ctx.lineTo(2, 20);            ctx.lineTo(1, -r + 18);            ctx.lineTo(-1, -r + 18);            ctx.fill();            ctx.restore();        }        //绘制指针的端点        function drawDot() {            ctx.beginPath();            ctx.fillStyle = &#39;white&#39;;            ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);            ctx.fill();        }        //动起来        function draw() {            //清除之前所绘制的            ctx.clearRect(0, 0, width, height);            var now = new Date();            var hour = now.getHours();            var minute = now.getMinutes();            var second = now.getSeconds();            drawBackground();            drawHour(hour, minute);            drawMinute(minute);            drawSecond(second)            drawDot();            ctx.restore();        }        //draw();        setInterval(draw, 1000);    </script>