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

2019-11-20 10:41:44

字体：大中小

来源：转载

供稿：网友

本文实例讲述了基于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>

更多关于js特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》

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

上一篇：基于canvas实现的绚丽圆圈效果完整实例

下一篇：js实现的页面矩阵图形变换特效