基于canvas实现的钟摆效果完整实例


Posted in Javascript onJanuary 26, 2016

本文实例讲述了基于canvas实现的钟摆效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

基于canvas实现的钟摆效果完整实例

具体代码如下:

<!DOCTYPE html>
<html>
 <head>
  <title>demo</title>
  <style type="text/css">
   body {
    margin:0; padding:0;
   }
   #canvas {
    border:2px solid gray; box-shadow:0px 0px 2px 2px #494949;
   }
  </style>
 </head>
 <body>
  <canvas id="canvas" width="500px" height="500px"></canvas>
  <script type="text/javascript">
   var canvas = document.getElementById("canvas");
   var ctx = canvas.getContext("2d");
   var r = 250;
   var colorList = "abcdefABCDEF0123456789".split("");
   var colorListLength = colorList.length;
   var color = function() {
    var _color = "#";
    for(var i=0; i<6; i++) {
     _color += colorList[Math.round(Math.random()*colorListLength)];
    }
    return _color;
   };
   var createArc = function(attrs) {
    ctx.save();
    ctx.beginPath();
    ctx.fillStyle = attrs.color || color();
    ctx.arc(attrs.x, attrs.y, attrs.r, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
   };
   var createLine = function(from, to) {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(from.x, from.y);
    ctx.lineTo(to.x, to.y);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
   }
   var createAll = function(to) {
    createArc({x: 250, y: 0, r: 10, color: "black"});
    createArc({x: to.x, y: to.y, r: 20, color: "black"});
    createLine({x: 250, y: 0}, {x: to.x, y: to.y});
   };
   var minAngle = 0;
   var maxAngle = Math.PI;
   var addAngle = Math.PI/24;
   var angle = minAngle;
   var mode = "left";
   var interval = setInterval(function() {
    var y = Math.sin(angle)*r+200;
    var x = Math.cos(angle)*r+250;
    switch(mode) {
     case "left":
      ctx.clearRect(0, 0, 500, 500);
      createAll({x: x, y: y});
      angle += addAngle;
      if(angle > maxAngle) {
       mode = "right";
       angle -= addAngle;
       return;
      }
      break;
     case "right":
      ctx.clearRect(0, 0, 500, 500);
      createAll({x: x, y: y});
      angle -= addAngle;
      if(angle < minAngle) {
       mode = "default";
       angle += addAngle;
       return;
      }
      break;
     case "default":
      createAll({x: x, y: y});
      angle += addAngle;
      if(angle > maxAngle) {
       mode = "left";
       angle = minAngle;
       return;
      }
      break;
    }
   }, 50);
  </script>
 </body>
</html>

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

Javascript 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
js实现的页面矩阵图形变换特效
Jan 26 #Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 #Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 #Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 #Javascript
一篇文章掌握RequireJS常用知识
Jan 26 #Javascript
JS正则表达式比较常见用法
Jan 26 #Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 #Javascript
You might like
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
PHP单例模式详细介绍
2015/07/01 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
python读取word文档的方法
2015/05/09 Python
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
python基于phantomjs实现导入图片
2016/05/13 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
Python File(文件) 方法整理
2019/02/18 Python
python3对接mysql数据库实例详解
2019/04/30 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
int和Integer有什么区别
2013/05/25 面试题
毕业生自荐书
2013/12/18 职场文书
总账会计岗位职责
2014/03/13 职场文书
双创工作实施方案
2014/03/26 职场文书
党员创先争优活动总结
2014/05/04 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
爱心捐书活动总结
2014/07/05 职场文书
三好生演讲稿
2014/09/12 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
悬空寺导游词
2015/02/05 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
小学语文国培研修日志
2015/11/13 职场文书
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
优化Mysql查询的示例
2022/04/26 MySQL