JavaScript+html5 canvas繪制的圓弧蕩秋千效果完整實例

更新時間：2016年01月26日 11:44:11 作者：m1870164

這篇文章主要介紹了JavaScript+html5 canvas繪制的圓弧蕩秋千效果,以完整實例形式分析了JavaScript集合html5的canvas繪制圖形的相關技巧,需要的朋友可以參考下

本文實例講述了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程序設計有所幫助。

您可能感興趣的文章:

Bootstrap富文本組件wysiwyg數據保存到mysql的方法
這篇文章主要為大家詳細介紹了Bootstrap富文本組件wysiwyg數據保存到mysql的方法，感興趣的小伙伴們可以參考一下
2016-05-05
微信小程序實現點擊效果
這篇文章主要為大家詳細介紹了微信小程序實現點擊效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-06-06
JavaScript基于面向對象實現的無縫滾動輪播示例
這篇文章主要介紹了JavaScript基于面向對象實現的無縫滾動輪播,結合實例形式分析了JavaScript面向對象實現的無縫滾動輪播相關對象定義、初始化及功能實現技巧,需要的朋友可以參考下
2020-01-01
小程序使用watch監(jiān)聽數據變化的方法詳解
這篇文章主要介紹了小程序使用watch監(jiān)聽數據變化的方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-09-09
關于JS解構的5種有趣用法
這篇文章主要給大家介紹了關于JS解構的5種有趣用法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JS解構具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-09-09
如何實現瀏覽器上的右鍵菜單
如何實現瀏覽器上的右鍵菜單...
2006-07-07
javascript感應鼠標圖片透明度顯示的方法
這篇文章主要介紹了javascript感應鼠標圖片透明度顯示的方法,涉及javascript針對鼠標事件及圖片透明度操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
基于javascript的Form表單驗證
這篇文章主要為大家詳細介紹了基于javascript的Form表單驗證，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
原生javascript模仿win8等待提示圓圈進度條
一直很中意win8等待提示圓圈進度條，下面本文就使用原生javascript模仿win8等待進度條,需要的朋友可以參考下
2014-04-04
javaScript(JS)替換節(jié)點實現思路介紹
獲取要替換的節(jié)點,這種方法只適用于IE瀏覽器以及適用于各種瀏覽器的寫法，感興趣的朋友可以參考下哈
2013-04-04