使用canvas 做动态时钟特效

最新推荐文章于 2020-11-30 15:46:11 发布

zyljjf

最新推荐文章于 2020-11-30 15:46:11 发布

阅读量523

点赞数

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

本文链接：https://blog.csdn.net/zyljjf/article/details/78816568

版权

本文介绍如何利用HTML5的canvas元素创建一个动态时钟特效。通过获取当前时间，绘制时钟背景、小时、分钟和秒针，以及时钟中心点，实现了实时更新的时钟展示。

摘要由CSDN通过智能技术生成

使用canvas 做动态时钟特效

1) shizhong.html

    <style type="text/css">
        div{

            text-align: center;
            margin: 250px;
        }
        #clock{
            border: 1px solid #ccc;
        }


    </style>



</head>
<body>

    <div>
        <canvas id="clock" height="300px" width="300px"></canvas>

    </div>

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


</body>

2) js/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.lineWi