JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例

2019-11-20 10:41:32

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

<!DOCTYPE html><html> <head>  <title>demo</title>  <style type="text/css">   #canvas {    margin:50px; border:5px solid gray; box-shadow:0px 0px 5px 5px #494949;   }  </style> </head> <body>  <canvas id="canvas" width="500px" height="500px"></canvas> </body> <script type="text/javascript">  var canvas = document.getElementById("canvas");  var ctx = canvas.getContext("2d");  var r_x = 250, r_y = 0;  var offset_h = 250;  var offset_w = 500;  var count = 0;  var mode = "up";  var temp = 0;  var getRPoint = function(x, y) {   var r = (Math.pow(x, 2) + Math.pow(y, 2)) / (2 * y);   var point = {    x: x,    y: Math.abs(250 - (r - y)),    r: r   };   return point;  };  function arc(attrs) {   ctx.beginPath();   ctx.arc(attrs.x, attrs.y, attrs.r, attrs.startAngle || 0, attrs.endAngle || Math.PI);   ctx.stroke();  }  var interval = setInterval(function() {    count++;   switch(mode) {    case "up":     temp = count;     ctx.clearRect(0, 0, 500, 500);     if(count%18 == 0) {      mode = "down";      return;     }     break;    case "down":     temp = 36 - count;     ctx.clearRect(0, 0, 500, 500);     if(count%36 == 0) {      mode = "default";      return;     }         break;    case "default":     temp = count - 36;     if(count%54 == 0) {      mode = "up";      count = 0;      return;     }   }   arc(getRPoint(250, 250-8*temp));  }, 100); </script></html>

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

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

上一篇：Javascript中匿名函数的调用与写法实例详解(多种)

下一篇：JS组件Bootstrap Select2使用方法详解