canvas与JS实现动态时钟动画

最新推荐文章于 2023-04-08 15:31:05 发布

vx17629341185

最新推荐文章于 2023-04-08 15:31:05 发布

阅读量235

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_43424506/article/details/102697335

版权

js实现动态时钟效果

这次给大家带来canvas与JS实现动态时钟动画，canvas与JS实现动态时钟动画的注意事项有哪些，下面就是实战案例，一起来看一下。
在这里插入图片描述

<!DOCTYPE html>

<html>
<head lang="en">
  <meta charset="UTF-8">

</head>

<body>

<canvas width="800" height="600"></canvas>

</body>

<script>

  function Clock(opt) {
   

    for (var key in opt) {
   

      this[key] = opt[key];

    }

    this.init();

  }

  Clock.prototype = {
   

    init: function () {
   

      var self = this;

      var ctx = this.ctx;

      this.timer = setInterval(function(){
   

        ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

        self.drawDial();

        self.drawDegreeScale();

        self.drawNumber();

        self.drawPointers();

      },1000);

    },

    drawDial: function () {
   

      var ctx = this.ctx;

      ctx.save();

      ctx.beginPath();

最低0.47元/天解锁文章

vx17629341185

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas与JS实现动态时钟动画

js实现动态时钟效果这次给大家带来canvas与JS实现动态时钟动画，canvas与JS实现动态时钟动画的注意事项有哪些，下面就是实战案例，一起来看一下。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"></head><body>...
复制链接

扫一扫