JavaScript+html5 canvas繪製的圓弧蕩鞦韆效果完整執行個體，html5canvas

JavaScript+html5 canvas繪製的圓弧蕩鞦韆效果完整執行個體，html5canvas

本文執行個體講述了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>