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程序设计有所帮助。