canvas画钟表

运用canvas，js知识，画钟表
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        canvas{
            border:1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        var canvas=document.getElementById('canvas');
        var ctx=canvas.getContext('2d')
        draw()
        function draw() {
            ctx.clearRect(0,0,canvas.width,canvas.height)
            // 画圆
            ctx.beginPath();
            ctx.arc(250,250,200,0,2*Math.PI,true);
            ctx.clip()
            ctx.closePath();
            ctx.strokeStyle='black';
            ctx.stroke()
            ctx.globalCompositeOperation="destination-over";
            // 图片
            var img=new Image();
            img.src='img/test.png';
            img.onload=function () {
                ctx.drawImage(img,-50,-50,600,600)
            }
            ctx.clip();
            // 时针刻度
            for (var i=0;i<12;i++){
                ctx.save();
                ctx.translate(250,250);
                ctx.rotate(i*30*Math.PI/180)
                ctx.beginPath();
                ctx.moveTo(0,-190);
                ctx.lineTo(0,-170);
                ctx.closePath();
                ctx.stroke()
                ctx.restore()
            }
            for (var i=0;i<60;i++){
                ctx.save();
                ctx.translate(250,250);
                ctx.rotate(i*6*Math.PI/180)
                ctx.beginPath();
                ctx.moveTo(0,-190);
                ctx.lineTo(0,-180);
                ctx.closePath();
                ctx.stroke()
                ctx.restore()
            }
            // 交叉点
            ctx.save();
            ctx.translate(250,250);
            ctx.beginPath();
            ctx.arc(0,0,5,0,2*Math.PI,true)
            ctx.closePath();
            ctx.strokeStyle='black';
            ctx.stroke()
            ctx.fillStyle='#fff';
            ctx.fill();
            ctx.restore()
            var dt=new Date();
            var h=dt.getHours();
            var m=dt.getMinutes();
            var s=dt.getSeconds();
            h=h+m/60;
            h=h>12?h-12:h;
            // 时针
            ctx.save();
            ctx.translate(250,250);
            ctx.rotate(h*30*Math.PI/180)
            ctx.beginPath();
            ctx.moveTo(0,20);
            ctx.lineTo(0,-100)
            ctx.closePath();
            ctx.strokeStyle='red';
            ctx.stroke()
            ctx.restore()
            // 分针
            ctx.save();
            ctx.translate(250,250);
            ctx.rotate(m*6*Math.PI/180)
            ctx.beginPath();
            ctx.moveTo(0,20);
            ctx.lineTo(0,-120)
            ctx.closePath();
            ctx.strokeStyle='black';
            ctx.stroke()
            ctx.restore()
            //秒针
            ctx.save();
            ctx.translate(250,250);
            ctx.rotate(s*6*Math.PI/180)
            ctx.beginPath();
            ctx.moveTo(0,20);
            ctx.lineTo(0,-140)
            ctx.closePath();
            ctx.strokeStyle='black';
            ctx.stroke()
            ctx.restore();
            // 重新定义时间
            var hour=dt.getHours();
            var min=dt.getMinutes();
            var sco=dt.getSeconds();
            var h1=hour>9?hour:("0"+hour);
            var m1=min>9?min:("0"+min);
            var s1=sco>9?sco:("0"+sco);
            ctx.save();
            ctx.beginPath();
            ctx.font='20px 微软雅黑';
            ctx.fillText(h1+':'+m1+':'+s1,200,300);
            ctx.fill();
            ctx.closePath();
            ctx.restore()
            
            ctx.save();
            ctx.translate(250,250);
            ctx.beginPath();
            for (var i=1;i<13;i++){
                var x=Math.sin(i*30*Math.PI/180);
                var y=-Math.cos(i*30*Math.PI/180);
                ctx.fillStyle="#000";
                ctx.font="bold 20px Calibri";
                ctx.textAlign='center';
                ctx.textBaseline='middle';
                ctx.fillText(i,x*150,y*150);
            }
            ctx.closePath()
            ctx.restore();
        }
        setInterval(draw,1000)
    </script>
</body>
</html>
注意：在绘制时针、分针、秒针的时候，每一个旋转的角度是不同的：时针：ctx.rotate(hours*30*Math.PI/180); 分针：ctx.rotate(minutes*6*Math.PI/180);
猜你喜欢
