JS+canvas绘制的动态机械表动画效果


Posted in Javascript onSeptember 12, 2017

本文实例讲述了JS+canvas绘制的动态机械表动画效果。分享给大家供大家参考,具体如下:

先来看看运行效果:

JS+canvas绘制的动态机械表动画效果

完整实例代码:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>3water.com canvas时钟</title>
  <style>
    canvas {
      border: 1px solid red;
    }
  </style>
</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();
      ctx.lineWidth = this.clockDialW;
      ctx.strokeStyle = this.clockDialColor;
      ctx.arc(this.clockX, this.clockY, this.clockRadius, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.restore();
    },
    drawDegreeScale: function () {
      var ctx = this.ctx;
      var clockRadius = this.clockRadius;
      var clockX = this.clockX;
      var clockY = this.clockY;
      var bigDegreeScaleL = this.bigDegreeScaleL;
      var smallDegreeScale = this.smallDegreeScale;
      var startX, startY, endX, endY, radian;
      ctx.save();
      for (var i = 0; i < 12; i++) {
        radian = i * Math.PI / 6;
        endX = clockX + clockRadius * Math.cos(radian);
        endY = clockY + clockRadius * Math.sin(radian);
        if (radian % (Math.PI / 2) == 0) {
          startX = clockX + (clockRadius - bigDegreeScaleL) * Math.cos(radian);
          startY = clockY + (clockRadius - bigDegreeScaleL) * Math.sin(radian);
          ctx.lineWidth = this.bigDCWidth;
        } else {
          startX = clockX + (clockRadius - smallDegreeScale) * Math.cos(radian);
          startY = clockY + (clockRadius - smallDegreeScale) * Math.sin(radian);
          ctx.lineWidth = this.smallDCWidth;
        }
        ctx.beginPath();
        ctx.moveTo(startX, startY);
        ctx.lineTo(endX, endY);
        ctx.stroke();
        ctx.restore();
      }
    },
    drawNumber: function () {
      var ctx = this.ctx;
      var textX, textY, textRadian;
      var clockX = this.clockX;
      var clockY = this.clockY;
      var clockRadius = this.clockRadius;
      ctx.font = '20px 微软雅黑';
      ctx.fillStyle = 'red';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.save();
      for (var i = 0; i < 12; i++) {
        textRadian = i * Math.PI / 6 - Math.PI/3;
        textX = clockX + (clockRadius - 40) * Math.cos(textRadian);
        textY = clockY + (clockRadius - 40) * Math.sin(textRadian);
        ctx.beginPath();
        ctx.fillText(i + 1, textX, textY);
      }
      ctx.restore();
    },
    drawPointers: function () {
      var date = new Date();
      var h = date.getHours();
      var m = date.getMinutes();
      var s = date.getSeconds();
      h = h % 12;
      var hRadian = 2 * Math.PI / 12 * h - Math.PI / 2;
      this.drawPoint(hRadian,30,'red',8);
      var mRadian = 2 * Math.PI / 60 * m - Math.PI / 2;
      this.drawPoint(mRadian,50,'blue',6);
      var sRadian = 2 * Math.PI / 60 * s - Math.PI / 2;
      this.drawPoint(sRadian,70,'green',2);
    },
    drawPoint: function (radian, length,color,lineWidth) {
      var x = this.clockX + Math.cos(radian) * length;
      var y = this.clockY + Math.sin(radian) * length;
      var ctx = this.ctx;
      ctx.save();
      ctx.beginPath();
      ctx.strokeStyle = color;
      ctx.lineWidth = lineWidth;
      ctx.moveTo(this.clockX,this.clockY);
      ctx.lineTo(x,y);
      ctx.stroke();
      ctx.restore();
    }
  };
</script>
<script>
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  var clock = new Clock({
    ctx: this.ctx,
    clockRadius: 150,
    clockX: 300,
    clockY: 300,
    clockDialW: 6,
    clockDialColor: 'blue',
    bigDegreeScaleL: 20,
    bigDCWidth: 6,
    smallDegreeScale: 10,
    smallDCWidth: 4
  });
</script>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js 表格隔行颜色
Dec 02 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
node.js中的buffer.toJSON方法使用说明
Dec 14 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
JS截取字符串实例详解
Nov 24 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
基于vue实现微博三方登录流程解析
Nov 04 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 #Javascript
Angular 4.0学习教程之架构详解
Sep 12 #Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 #jQuery
详解vue axios中文文档
Sep 12 #Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 #Javascript
vue-resouce设置请求头的三种方法
Sep 12 #Javascript
vue params、query传参使用详解
Sep 12 #Javascript
You might like
PHP中英混合字符串截取函数代码
2011/07/17 PHP
PHP 代码规范小结
2012/03/08 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
jQuery之Deferred对象详解
2014/09/04 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
vue中activated的用法
2021/01/03 Vue.js
python传递参数方式小结
2015/04/17 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
中学教师岗位职责
2013/11/26 职场文书
会计专业自荐书
2014/07/08 职场文书
会计学专业求职信
2014/07/17 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
爱心捐助活动总结
2015/05/09 职场文书
停发工资证明范本
2015/06/12 职场文书
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers
Go语言特点及基本数据类型使用详解
2022/03/21 Golang
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏