Js用Canvas实现简单时钟

最新推荐文章于 2024-07-14 12:56:18 发布

milloc

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量448

点赞数

分类专栏： web.js 文章标签： canvas javascript

本文链接：https://blog.csdn.net/ax1232/article/details/77098070

版权

web.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

才开始学习canvas，利用canvas的实现了简单的时钟。效果图如下：

这里写图片描述

思路如下：
利用setInterval()注册每隔1秒触发的画钟事件。drawClock()流程图如下：

源代码如下：

<!DOCTYPE html>
<html>
<head>
<title>clock</title>
<style type="text/css">
    canvas {
        position: absolute;
        margin: -100px;
        top: 50%;
        left: 50%;
    }
</style>
</head>
<body>
<canvas id="clock" width="200px" height="200px">This is a clock</canvas>
<script type="text/javascript">
//clock
var drawing = document.querySelector('#clock');
var context = drawing.getContext('2d');
var drawClock = function () {
    var time = new Date();
    var second = time.getSeconds();
    var minute = time.getMinutes();
    var hour = time.getHours();
    var secondhandAngle = second * Math.PI / 30;
    var minutehandAngle = minute * Math.PI / 30;
    var hourhandAngle = hour * Math.PI / 12;
    //clear canvas
    context.clearRect(0, 0, 200, 200);
    //begin draw
    context.beginPath();

    //draw panel
    context.arc(100, 100, 100, 99, 0, 2 * Math.PI, false);
    context.moveTo(194, 100);
    context.arc(100, 100, 94, 0, 2 * Math.PI, false);

    //draw text
    context.font = "bold 14px Consolar";
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.fillText('12', 100, 20);
    context.fillText('3', 180, 100);
    context.fillText('6', 100, 180);
    context.fillText('9', 20, 100);

    //draw second hand
    context.moveTo(100, 100);
    context.lineTo(100 + 80 * Math.sin(secondhandAngle), 100 - 80 * Math.cos(secondhandAngle));
    //draw minute hand
    context.moveTo(100, 100);
    context.lineTo(100 + 65 * Math.sin(minutehandAngle), 100 - 65 * Math.cos(minutehandAngle));
    //draw hour hand
    context.moveTo(100, 100);
    context.lineTo(100 + 50 * Math.sin(hourhandAngle), 100 - 50 * Math.cos(hourhandAngle));
    //complete draw
    context.stroke();
};
setInterval(drawClock, 1000);
</script>
</body>
</html>