Canvas时钟效果

先附上效果图。时钟会获取当前系统时间，并开始运行，下面是代码全部截图，欢迎canvas初学者学习使用，一定要静下心来多敲代码练习。

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas时钟</title>
    <script src="js/jquery.js"></script>
    <script src="js/clock.js"></script>
    <style type="text/css" rel="stylesheet">
        #clock{
            display: block;
            margin:0 auto;
        }
    </style>
</head>
<body>
<canvas id="clock" width="500" height="500">
您的浏览器不支持canvas标签，无法实现时钟效果
</canvas>
</body>
</html>

这里的<script src="js/jquery.js"></script>是引用jQuery文件，为的是在DOM完全就绪并可以使用时调用时钟JS。

JS代码截图

clock.js

// 时钟js代码
$(function () {
    //设置2d绘图环境
    var clock = $("#clock")[0];
    var cxt = clock.getContext('2d');
    function clockset() {
        //清除画布
        cxt.clearRect(0,0,500,500);
        //获取当前时间
        var now = new Date();
        //获取秒
        var sec = now.getSeconds();
        //获取分
        var min = now.getMinutes();
        min = min+sec/60;
        //获取时（必须获取浮点类型）
        //小时+分数转化的小数
        var hour = now.getHours();
        hour=hour+min/60;
        //将24小时进制转换为12小时的方式
        hour=hour>12?hour-12:hour;
        //alert(sec+"-"+min+"-"+hour); 测试
        //表盘（蓝色边框）
        cxt.lineWidth=10;
        cxt.strokeStyle="gray";
        cxt.beginPath();
        cxt.arc(250,250,200,0,360,false);
        cxt.closePath();
        cxt.stroke();
        //刻度（时刻度，分刻度）
        //时刻度
        for(var i=0;i<12;i++){
            cxt.save();
            //设置时针的粗细
            cxt.lineWidth=7;
            //设置时针的颜色
            cxt.strokeStyle='red';
            //设置圆点
            cxt.translate(250,250);
            //设置旋转角度
            //角度*Math.PI/180=弧度
            cxt.rotate(i*30*Math.PI/180);
            cxt.beginPath();
            //往左往上是负值
            //往右往下是正值
            cxt.moveTo(0,-170);
            cxt.lineTo(0,-190);
            cxt.closePath();
            cxt.stroke();
            cxt.restore();
        }
        //分刻度
        for(var i=0;i<60;i++){
            cxt.save();
            //设置分刻度的粗细
            cxt.lineWidth=5;
            //设置颜色（默认值）
            //设置画布的零零点
            cxt.translate(250,250);
            //设置旋转角度
            cxt.rotate(i*6*Math.PI/180);
            //画分针刻度
            cxt.beginPath();
            cxt.moveTo(0,-180);
            cxt.lineTo(0,-190);
            cxt.closePath();
            if(i%5==0){
                cxt.strokeStyle='red';
                cxt.stroke();
            }
            else {
                cxt.stroke();
            }
            cxt.restore();
        }
        //时针，分针，秒针
        //时针
        cxt.save();
        //时针风格设置
        //时针宽度
        cxt.lineWidth=7;
        //时针颜色
        cxt.strokeStyle='black';
        //设置异次元空间的零零点
        cxt.translate(250,250);
        //设置旋转角度
        cxt.rotate(hour*30*Math.PI/180);
        cxt.beginPath();
        cxt.moveTo(0,-140);
        cxt.lineTo(0,10);
        cxt.closePath();
        cxt.stroke();
        cxt.restore();
        //分针
        cxt.save();
        //设置分针的粗细
        cxt.lineWidth=5;
        //颜色
        cxt.strokeStyle='black';
        cxt.translate(250,250);
        cxt.rotate(min*6*Math.PI/180);
        cxt.beginPath();
        cxt.moveTo(0,-150);
        cxt.lineTo(0,10);
        cxt.closePath();
        cxt.stroke();
        cxt.restore();
        //秒针
        cxt.save();
        //设置分针的粗细
        cxt.lineWidth=3;
        //颜色
        cxt.strokeStyle='red';
        cxt.translate(250,250);
        cxt.rotate(sec*6*Math.PI/180);
        cxt.beginPath();
        cxt.moveTo(0,-160);
        cxt.lineTo(0,15);
        cxt.closePath();
        cxt.stroke();
        //画出圆点
        cxt.beginPath();
        cxt.arc(0,0,5,0,360,false);
        cxt.closePath();
        //设置填充样式
        cxt.fillStyle='gray';
        cxt.fill();
        //设置笔触样式
        cxt.strokeStyle='red';
        cxt.stroke();
        //设置秒针前端的小圆点
        cxt.restore();
    }
    clockset();
    //使用setInterval(代码，毫秒时间），让时针动起来
    setInterval(clockset,1000);
});

猜你喜欢