基于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 相关文章推荐
ext实现完整的登录代码
Aug 08 Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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
星际RPG字典
2020/03/04 星际争霸
十天学会php之第八天
2006/10/09 PHP
ADODB类使用
2006/11/25 PHP
PHP 开发工具
2006/12/06 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
element 动态合并表格的步骤
2020/12/31 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
python的concat等多种用法详解
2018/11/28 Python
python实现公司年会抽奖程序
2019/01/22 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
Python内存管理实例分析
2019/07/10 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
Python的logging模块基本用法
2020/12/24 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
企业统计员岗位职责
2013/12/13 职场文书