基于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 相关文章推荐
javascript 二进制运算技巧解析
Nov 27 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 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 set_time_limit(0)长连接的实现分析
2010/03/02 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
判断脚本加载是否完成的方法
2009/05/26 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
员工评语大全
2014/01/19 职场文书
优秀党员获奖感言
2014/02/18 职场文书
服装采购员岗位职责
2014/03/15 职场文书
八项规定整改方案
2014/10/01 职场文书
幼师小班个人总结
2015/02/12 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
无线电通信名词解释
2022/02/18 无线电