本文實例講述了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>更多關(guān)于js特效相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery動畫與特效用法總結(jié)》及《jQuery常見經(jīng)典特效匯總》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
新聞熱點
疑難解答
