html5、canvas绘制本地时钟

效果图：

 

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas clock</title>
</head>
<body>
<canvas id="clock" width="500" height="500">您的浏览器不支持canvas标签</canvas>

<script type="text/javascript">
var canvas = document.getElementById('clock');
var clock = canvas.getContext('2d');
var r = canvas.width/2.5;  //半径
function drowClock(){
    //清除画布

    clock.clearRect(0, 0, 800, 800);
    var now = new Date();
    var secd = now.getSeconds();
    var min = now.getMinutes();
    var hour = now.getHours();
    //小时必须获取浮点类型（小时+分数转化的小时）
    //时间格式19:23:30
    //将24小时进制装换为12小时进制
    hour = hour + (min / 60);
    hour = hour > 12 ? hour - 12 : hour;
    //外圈
    clock.beginPath();
    clock.lineWidth = 10;
    clock.strokeStyle = "#d9d9d9";
    clock.arc(250, 250, 200, 0, 360, false);
    clock.stroke();
    clock.closePath();
    //刻度
    //时刻度
    for (var i = 0; i < 12; i++) {
        clock.save();
        //设置时针的粗细
        clock.lineWidth = 7;
        //设置时针的颜色
        clock.strokeStyle = "#727272";
        //先设置0,0点
        clock.translate(250, 250);
        //再设置旋转角度
        clock.rotate((i * 30) * Math.PI / 180);//角度*Math.PI/180=弧度
        clock.beginPath();
        clock.moveTo(0, -170);
        clock.lineTo(0, -190);
        clock.closePath();
        clock.stroke();
        clock.restore();
    }
    //分刻度
    for (var i = 0; i < 60; i++) {
        clock.save();
        //设置时针的粗细
        clock.lineWidth = 3;
        //设置时针的颜色
        clock.strokeStyle = "#727272";
        //先设置0,0点
        clock.translate(250, 250);
        //再设置旋转角度
        clock.rotate((i * 6) * Math.PI / 180);//角度*Math.PI/180=弧度
        clock.beginPath();
        clock.moveTo(0, -180);
        clock.lineTo(0, -190);
        clock.closePath();
        clock.stroke();
        clock.restore();
    }
    //时针
    clock.save();
    clock.lineWidth = 7;
    clock.strokeStyle = "#727272";
    clock.translate(250, 250);
    clock.rotate(hour * 30 * Math.PI / 180);
    clock.beginPath();
    clock.moveTo(0, -140);
    clock.lineTo(0, 30);
    clock.stroke();
    clock.closePath();
    clock.restore();
    // 文字
    for(i = 0;i<12;i++){
            angle = i * 30;
            // 转换为弧度制,Math.sin、Math.cos都接受弧度制单位
            angle = angle*Math.PI/180;;
            font = (i + 3 > 12)?i+3-12 : i+3;
            fontX = 245+Math.round(Math.cos(angle)*(r-45));
            fontY = 256+Math.round(Math.sin(angle)*(r-45));
            clock.font = 'bold 16px 微软雅黑';
            clock.fillText(font+'',fontX,fontY);
        }
    //分针
    clock.save();
    clock.lineWidth = 5;
    clock.strokeStyle = "#727272";
    clock.translate(250, 250);
    clock.rotate(min * 6 * Math.PI / 180);
    clock.beginPath();
    clock.moveTo(0, -160);
    clock.lineTo(0, 30);
    clock.stroke();
    clock.closePath();
    clock.restore();
    //秒针
    clock.save();
    clock.lineWidth = 3;
    clock.strokeStyle = "#727272";
    clock.translate(250, 250);
    clock.rotate(secd * 6 * Math.PI / 180);
    clock.beginPath();
    clock.moveTo(0, -170);
    clock.lineTo(0, 30);
    clock.closePath();
    clock.stroke();
    //画交叉点
    clock.beginPath();
    clock.arc(0, 0, 5, 0, 360, false);
    clock.closePath();
    clock.fillStyle = "#ebebeb";
    clock.fill();
    clock.stroke();
    clock.beginPath();
    clock.arc(0, -150, 5, 0, 360, false);
    clock.closePath();
    clock.fillStyle = "gray";
    clock.fill();
    clock.stroke();
    clock.restore();
     
    window.requestAnimationFrame(drowClock);
}
//使用setInternal（代码，（毫秒）时间）  让时钟动起来
drowClock();
// setInterval(drowClock, 1000);
</script>
</body>
</html>

 

posted @ 2016-03-17 16:05  riven.lcs  阅读(514)  评论(0)  编辑  收藏  举报