canvas绘制时钟

最新推荐文章于 2023-10-26 08:47:56 发布

sd訫訴sd

最新推荐文章于 2023-10-26 08:47:56 发布

阅读量208

点赞数

分类专栏： html 文章标签： html canvas

本文链接：https://blog.csdn.net/qq_35864862/article/details/79682090

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本篇博客旨在通过使用canvas实现时钟绘制，以及当改变canvas的大小时，最终效果比例变化与canvas相同。

运行效果图展示：
这里写图片描述

index.html部分：

<!DOCTYPE html>
<html>
<head>
    <title>canvas绘制时钟</title>
    <meta charset="utf-8">
    <style type="text/css">
        div{
            text-align: center;
            margin-top:250px; 
        }
        #clock{
            border: 1px solid #ccc
        }
    </style>
</head>
<body>
    <div>
        <canvas id="clock" height="600px" width="600px"></canvas>
    </div>

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

clock.js部分

var dom = document.getElementById("clock");
var ctx = dom.getContext('2d');
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width / 2;
var rem = width / 200 ;
function drawBackGround(){
    ctx.save();
    ctx.translate(r,r);
    ctx.beginPath();
    ctx.lineWidth = 10 * rem;
    ctx.arc(0, 0, r - ctx.lineWidth/2, 0, 2*Math.PI,false);
    ctx.stroke();

    ctx.font = 18 * rem +'px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];

    hourNumbers.forEach(function (number, i) {
        var rad = 2 * Math.PI / 12 * i;
        var x = Math.cos(rad) * (r - 30* rem);
        var y = Math.sin(rad) * (r - 30* rem);
        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* rem);
        var y = Math.sin(rad) * (r - 18* rem);
        ctx.beginPath();
        if (i % 5 == 0) {
            ctx.fillStyle = '#000';
            ctx.arc(x, y, 2*rem, 0, 2*Math.PI,false);
        } else {
            ctx.fillStyle = '#ccc';
            ctx.arc(x, y, 2*rem, 0, 2*Math.PI,false);
        }
        ctx.fill();
    }
}



function drawHour(hour,minute) {
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 12 * hour;
    var mrad = 2 * Math.PI / 12 / 60 * minute;
    rad = rad + mrad;
    ctx.rotate(rad);
    ctx.lineWidth = 6*rem;
    ctx.lineCap = 'round';
    ctx.moveTo(0,10*rem);
    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*rem;
    ctx.lineCap = 'round';
    ctx.moveTo(0,10*rem);
    ctx.lineTo(0,30*rem-r);
    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*rem,20*rem);
    ctx.lineTo(2*rem,20*rem);
    ctx.lineTo(-1,18*rem-r);
    ctx.lineTo(1,18*rem-r);
    ctx.fill();
    ctx.restore();
}
function drawDot(argument) {
    ctx.beginPath();
    ctx.fillStyle = '#fff';
    ctx.arc(0, 0, 3*rem, 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);

sd訫訴sd

关注

0
点赞
踩
0

收藏

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

本篇博客旨在通过使用canvas实现时钟绘制，以及当改变canvas的大小时，最终效果比例变化与canvas相同。运行效果图展示： index.html部分：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;canvas绘制时钟&lt;/title&gt; &lt;meta charset="...
复制链接

扫一扫

专栏目录