canvas--钟表

canvas钟表的例子：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style></style>
</head>
<body>
<canvas id="cav" width="600" height="600"></canvas>
<script>
    var cav = document.getElementById('cav');
    var cax = cav.getContext('2d');
    function clock(){
        var img = new Image();
        img.src = 'psb.jpg';
        img.onload = function(){
            var date = new Date();
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();
            cax.clearRect(0,0,600,600);
            cax.save();

            cax.save();
                cax.globalAlpha = 0.8;
                cax.globalCompositeOperation = "destination-atop";
                cax.drawImage(img,0,0,420,420);
                cax.fillStyle = "#000";
                cax.arc(210,210,200,0,2*Math.PI);
                cax.shadowColor = "#000";
                cax.shadowBlur = "30";

                cax.fill();
            cax.restore();

            cax.translate(210,210);
            /*表盘长线*/
            for(var i = 0; i < 12;i++){
                cax.beginPath();
                cax.strokeStyle = "#fff";
                cax.lineWidth = 6;
                cax.moveTo(0,-180);
                cax.lineTo(0,-195);
                cax.stroke();
                cax.closePath();
                cax.rotate(Math.PI/6);
            }
            /*表盘短线*/
            for(var i = 0;i < 60;i++){
                if(i%5){
                    cax.beginPath();
                    cax.strokeStyle = '#fff';
                    cax.lineWidth = 2;
                    cax.moveTo(0,-180);
                    cax.lineTo(0,-190);
                    cax.stroke();
                    cax.closePath();
                }
                cax.rotate(Math.PI/30);
            }

            /*秒针走动*/
            cax.save();
            cax.beginPath();
            cax.rotate(s*Math.PI/30);
            cax.strokeStyle = "red";
            cax.lineWidth = 2;
            cax.moveTo(0,10);
            cax.lineTo(0,-170);
            cax.stroke();
            cax.closePath();
            cax.restore();

            /*分针走动*/
            cax.save();
            cax.beginPath();
            cax.rotate(m*Math.PI/30 + (s*Math.PI/30/60));
            cax.strokeStyle = "#000";
            cax.lineWidth = 3;
            cax.moveTo(0,10);
            cax.lineTo(0,-150);
            cax.stroke();
            cax.closePath();
            cax.restore();

            /*时针走动*/
            cax.save();
            cax.beginPath();
            cax.rotate(h*Math.PI/6 + (m*Math.PI/360));
            cax.strokeStyle = "#000";
            cax.lineWidth = 4;
            cax.moveTo(0,10);
            cax.lineTo(0,-120);
            cax.stroke();
            cax.closePath();
            cax.restore();

            cax.restore();
        }
    }
    setInterval(function(){
       clock();
    },1000);
</script>
</body>
</html>
猜你喜欢
