编程 Javascript

基于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程序设计有所帮助。

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

- Author -

m1870164

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

TBCompressor js代码压缩

Jan 05 Javascript

引用外部js乱码问题分析及解决方案

Apr 12 Javascript

JavaScript学习心得之概述

Jan 20 Javascript

JavaScript中模拟实现jsonp

Jun 19 Javascript

JQuery实现左右滚动菜单特效

Sep 28 Javascript

浅析2种JavaScript继承方式

Dec 04 Javascript

js实现文字超出部分用省略号代替实例代码

Sep 01 Javascript

分享一个原生的JavaScript拖动方法

Sep 25 Javascript

Javascript农历与公历相互转换的简单实例

Oct 09 Javascript

前端框架学习总结之Angular、React与Vue的比较详解

Mar 14 Javascript

angular动态表单制作

Feb 23 Javascript

JS使用Prim算法和Kruskal算法实现最小生成树

Jan 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