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 相关文章推荐
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
在vue中使用防抖函数组件操作
Jul 26 Javascript
js实现购物车商品数量加减
Sep 21 Javascript
vue穿梭框实现上下移动
Jan 29 Vue.js
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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
PHP之数组学习
2011/05/29 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
让焦点自动跳转
2006/07/01 Javascript
javascript 新浪背投广告实现代码
2009/07/07 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
python装饰器实例大详解
2017/10/25 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
TensorFlow实现Logistic回归
2018/09/07 Python
python多线程抽象编程模型详解
2019/03/20 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
写好自荐信的技巧
2013/11/08 职场文书
2014年三八妇女节活动方案
2014/02/28 职场文书
安全承诺书范文
2014/03/26 职场文书
公证委托书格式
2014/09/13 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
Python如何将list中的string转换为int
2022/07/15 Ruby