关于h5页面:利用canvas绘制时钟

    window.onload = function () {        var canvas = document.querySelector('canvas');        var context = canvas.getContext('2d');         // 绘制圆盘        function clock() {            //绘制圆盘            context.beginPath();            context.arc(300, 300, 200, 0, Math.PI * 2);            context.fillStyle = 'pink';            context.fill();            context.closePath();            //绘制时刻度            for (i = 0; i < 12; i++) {                context.save();                context.lineWidth = 4;                context.beginPath();                //将原点平移300,300                context.translate(300, 300);                context.rotate(i * (Math.PI / 6));                context.moveTo(0, -180);                context.lineTo(0, -200);                context.stroke();                context.fillStyle = 'black';                context.rotate(Math.PI / 6);                context.fillText(i + 1, -8, -220);                context.closePath();                context.restore();            }            //绘制分刻度            for (i = 0; i < 60; i++) {                context.save();                context.lineWidth = 1;                context.beginPath();                //将原点平移300,300                context.translate(300, 300);                context.rotate(i * (Math.PI / 30));                context.moveTo(0, -190);                context.lineTo(0, -200);                context.stroke();                context.closePath();                context.restore();            }            // 获取以后工夫            var today = new Date();            var hour = today.getHours();            var min = today.getMinutes();            var sec = today.getSeconds();            //             hour = hour + min / 60;            // 绘制时针            context.lineWidth = 3            context.save();            context.translate(300, 300);            context.rotate(hour * Math.PI / 6);            context.beginPath();            context.moveTo(0, 10)            context.lineTo(0, -80);            context.stroke()            context.closePath();            context.restore();            // 绘制分针            context.lineWidth = 2;            context.save();            context.translate(300, 300);            context.rotate(min * (Math.PI / 30));            context.beginPath();            context.moveTo(0, 10);            context.lineTo(0, -100);            context.stroke()            context.closePath();            context.restore();            // 绘制秒针             context.lineWidth = 1;            context.save();            context.translate(300, 300);            context.rotate(sec * Math.PI / 30);            context.beginPath();            context.moveTo(0, 10);            context.lineTo(0, -120);            context.strokeStyle = 'red';            context.stroke()            context.closePath();            context.restore();            // 绘制交叉处            // context.lineWidth=1            context.save();            context.translate(300, 300);            context.beginPath();            context.arc(0, 0, 5, 0, Math.PI * 2);            context.fill();            context.fillStyle = '#ccc'            context.strokeStyle = 'red'            context.stroke()            context.closePath();            context.restore();                setInterval(clock, 1000)//超时模仿间歇        }                    clock();    }

效果图如下：