HTML5 Canvas 小例子旋转的时钟

最新推荐文章于 2025-09-10 14:53:18 发布

weixin_30699831

最新推荐文章于 2025-09-10 14:53:18 发布

阅读量53

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lovling/p/6440701.html

本文介绍如何利用HTML5的Canvas元素结合JavaScript实现一个动态的时钟效果。该时钟能够实时显示当前时间，并通过不同的线条长度区分小时、分钟和秒针。文章提供了完整的代码示例。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <script type="text/javascript" src="jQuery.js"></script>
</head>
<style type="text/css">
    body {
        padding: 0;
        margin: 0;
        background: black;
    }
    #canvas {
        background: white;
        margin: 100px 0 0 300px;
    }
    #canvas>span {
        color: white;
        font-size: 14px;
    }
</style>
<body>
    <canvas id="canvas" width="600" height="500">
    <span>您的浏览器不支持</span>
</canvas>
</body>
</html>
<script type="text/javascript">
    /*获取绘制环境*/
    var oc = $('#canvas')[0];
    canvas = oc.getContext('2d');
    /*定义圆心和半径*/
    var x = 250, y = 250, r = 150;

    var time = setInterval(function() {
        ClocksWatche();
    }, 1000);

    function ClocksWatche() {
        /*清理画布*/
        canvas.clearRect(0, 0, oc.width, oc.height);
        /*开始绘制*/
        canvas.beginPath();
        for(var i = 0; i < 60; i++) {
            /*绘制起始点移到圆心*/
            canvas.moveTo(x, y);
            /*根据圆心和半径每6度绘制一次(圆心横坐标,圆心纵坐标,其实弧度,结束弧度,是否逆时针)*/
            canvas.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false);
        }
        /*连接至起始点*/
        canvas.closePath();
        /*画线*/
        canvas.stroke();
        /*设置线的粗细*/
        canvas.lineWidth = 3;
        /*开始绘制*/
        canvas.beginPath();
        for(var i = 0; i < 60; i++) {
            /*绘制起始点移到圆心*/
            canvas.moveTo(x, y);
            /*根据圆心和半径没30度绘制一次*/
            canvas.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false);
        }
        /*连接至起始点*/
        canvas.closePath();
        /*画线*/
        canvas.stroke();
        /*设置填充颜色*/
        canvas.fillStyle = 'white';
        canvas.beginPath();
        canvas.moveTo(x, y);
        canvas.arc(x, y, r * 14 / 15, 0, 360, false);
        canvas.closePath();
        canvas.fill();

        var loacalDate = new Date();
        var hours = loacalDate.getHours();
        var minute = loacalDate.getMinutes();
        var sencond = loacalDate.getSeconds();
        hours = (hours * 30 - 90 + minute / 2) * Math.PI / 180;
        minute = (minute * 6 - 90) * Math.PI / 180;
        sencond = (sencond * 6 - 90) * Math.PI / 180;

        canvas.beginPath();
        canvas.lineWidth = 5;
        canvas.moveTo(x, y);
        canvas.arc(x, y, r * 8 / 15, hours, hours, false);
        canvas.stroke();

        canvas.beginPath();
        canvas.lineWidth = 3;
        canvas.moveTo(x, y);
        canvas.arc(x, y, r * 10 / 15, minute, minute, false);
        canvas.stroke();

        canvas.beginPath();
        canvas.lineWidth = 1;
        canvas.moveTo(x, y);
        canvas.arc(x, y, r * 14 / 15, sencond, sencond, false);
        canvas.stroke();
    }
</script>