canvas 时钟demo

最新推荐文章于 2019-01-22 17:03:00 发布

yz764127031

最新推荐文章于 2019-01-22 17:03:00 发布

阅读量362

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/yz764127031/article/details/56840234

版权

web 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

ps:整理自慕课网课程
效果
这里写图片描述
html 文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style type = "text/css">
        div{
            text-align:center;
            margin-top: 50px;  
        }
        #clock{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div>
        <canvas id = "clock" height = "500px" width = "500px" ></canvas>
    </div>

    <script type = "text/javascript" src = "clock.js"></script>
</body>
</html>

var dom = document.getElementById('clock');
var ctx = dom.getContext('2d');
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width / 2;

function drawBackground(){
    ctx.save();
    ctx.translate(r,r);
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.arc(0,0,r-5,0,2*Math.PI,false);
    ctx.stroke();

    var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];
    ctx.font = '18px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    hourNumbers.forEach(function(number,i){
        var rad = 2*Math.PI /12 *i;
        var x = Math.cos(rad) * (r - 30);
        var y = Math.sin(rad) * (r - 30);
        ctx.fillText(number,x,y);
    });

    for (var i = 0; i < 60; i++) {
        var rad = 2*Math.PI /60 *i;
        var x = Math.cos(rad) * (r - 18);
        var y = Math.sin(rad) * (r - 18);
        ctx.beginPath();
        if (i % 5 === 0 ) {
            ctx.fillStyle = '#000';
            ctx.arc(x,y,3,0,2*Math.PI,false);
        }else{
            ctx.fillStyle = '#ddd';
            ctx.arc(x,y,2,0,2*Math.PI,false);
        }
        ctx.fill();
    }
}

function drawHour(hour){
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 12 * hour;
    ctx.rotate(rad);
    ctx.lineWidth = 6;
    ctx.lineCap = 'round';
    ctx.moveTo(0,10);
    ctx.lineTo(0,-r/2);
    ctx.stroke();
    ctx.restore();
}

function drawMinute(minute){
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 60 * minute;
    ctx.rotate(rad);
    ctx.lineWidth = 3;
    ctx.lineCap = 'round';
    ctx.moveTo(0,10);
    ctx.lineTo(0,-r+45);
    ctx.stroke();
    ctx.restore();
}

function drawSecond(second){
    ctx.save();
    ctx.beginPath();
    ctx.fillStyle = '#c14543';
    var rad = 2 * Math.PI / 60 * second;
    ctx.rotate(rad);
    ctx.lineWidth = 3;
    ctx.lineCap = 'round';
    ctx.moveTo(-2,20);
    ctx.lineTo(2,20);
    ctx.lineTo(1,-r + 18);
    ctx.lineTo(-1,-r + 18);
    ctx.fill();
    ctx.restore();

}
function drawDot(){
    ctx.beginPath();
    ctx.fillStyle = '#fff';
    ctx.arc(0,0,3,0,2*Math.PI,false);
    ctx.fill();
}

function draw(){
    ctx.clearRect(0,0,width,height);
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();

    drawBackground();
    drawHour(hour,minute);
    drawMinute(minute);
    drawSecond(second);
    drawDot();
    ctx.restore();
}

draw();
setInterval(draw,1000);

yz764127031

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 时钟demo

ps:整理自慕课网课程效果 html 文档<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas</title> <style type = "text/css"> div{ text-align:center;
复制链接

扫一扫

专栏目录