canvas实现简易时钟效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
</head>
<body>
  <canvas id="canvas"></canvas>

<script>
    var canvas = document.getElementById('canvas');
    canvas.width = 500;
    canvas.height = 500;
    // canvas.style.background = '#000';
    // canvas.style.border = "1px solid red";

    var ctx = canvas.getContext('2d');

    function clock(){
        // -----获取实时时间
        var date = new Date();
        var hour = date.getHours();
        var min = date.getMinutes();
        var sec = date.getSeconds();
        hour = hour > 12 ? (hour-12):hour;
        // console.log(hour+":"+date.getMinutes()+":"+sec);
        hour += (min/60);
        min += (sec/60); 

        ctx.clearRect(0,0,canvas.width,canvas.height);
        // -----画圆盘
        ctx.beginPath();
        ctx.arc(250,250,200,2*Math.PI,0);
        ctx.strokeStyle = "#00FFFF";
        ctx.lineWidth = 10 ;
        ctx.stroke();
        ctx.closePath();

        // 裁剪成圆形
        ctx.clip();

        // 添加背景图片
        var img = new Image();
        img.src = "image/pic1.jpg"
        ctx.drawImage(img,0,0,500,500);
        // 添加文字
        ctx.textBaseline = "top";
        ctx.font = "20px 微软雅黑";
        ctx.fillStyle = "#F00";
        ctx.fillText("Made In China",180,370);
        // 添加刻度数字
        ctx.font = "20px 微软雅黑";
        ctx.fillStyle = "#FF0";
        ctx.fillText("12",238,75);
        ctx.fillText("6",242,400);
        ctx.fillText("3",410,238);
        ctx.fillText("9",80,238);

        //显示时间
        ctx.font = "25px 微软雅黑";
        ctx.fillStyle = "#000";
        var str = date.getHours() +":"+date.getMinutes()+":"+date.getSeconds();
        ctx.fillText(str, 200, 330);

        // -----绘制小时刻度
        ctx.save();
        ctx.translate(250,250);
        ctx.strokeStyle = "#FFFF00"
        ctx.lineWidth = 7;
        for(var x=0;x<12;x++){
            ctx.beginPath();
            ctx.moveTo(0,-195);
            ctx.lineTo(0,-175);
            ctx.stroke();
            ctx.closePath();
            ctx.rotate(30*Math.PI/180);
        }
        ctx.restore();

        // -----绘制分钟刻度
        ctx.save();
        ctx.translate(250,250);
        ctx.strokeStyle = "#FFFF00"
        ctx.lineWidth = 5;
        for(var x=0;x<60;x++){
            ctx.beginPath();
            ctx.moveTo(0,-195);
            ctx.lineTo(0,-185);
            ctx.stroke();
            ctx.closePath();
            ctx.rotate(6*Math.PI/180);
        }
        ctx.restore();

        // -----画时针
        ctx.save();
        ctx.translate(250,250);
        ctx.strokeStyle = "#00FFFF"
        ctx.lineWidth = 7;
        ctx.beginPath();
        ctx.rotate(hour*30*Math.PI/180);
        ctx.moveTo(0,10);
        ctx.lineTo(0,-130);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();

        // -----画分针
        ctx.save();
        ctx.translate(250,250);
        ctx.strokeStyle = "#FFFF00"
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.rotate(min*6*Math.PI/180);
        ctx.moveTo(0,10);
        ctx.lineTo(0,-145);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();

        // -----画秒针
        ctx.save();
        ctx.translate(250,250);
        ctx.strokeStyle = "#FF0000"
        ctx.lineWidth = 3;
        ctx.beginPath();
        ctx.rotate(sec*2*Math.PI/60);
        ctx.moveTo(0,10);
        ctx.lineTo(0,-160);
        ctx.stroke();
        ctx.closePath();

        // 画小圆1
        ctx.beginPath();
        ctx.fillStyle = "#FFFF00";
        ctx.strokeStyle = "#FF0000";
        ctx.arc(0,0,7,0,2*Math.PI,0);
        ctx.fill();
        ctx.stroke();
        ctx.closePath();
        // 画小圆2
        ctx.beginPath();
        ctx.fillStyle = "#FFFF00";
        ctx.strokeStyle = "#FF0000";
        ctx.arc(0,-135,5,0,2*Math.PI,0);
        ctx.fill();
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
    clock();
    setInterval(clock,1000);
</script>
</body>
</html>

效果

这里写图片描述

posted @ 2017-09-24 13:03  wood2012  阅读(192)  评论(0)  编辑  收藏  举报