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

运行效果截图如下：

具体代码如下：

！DOCTYPE html html标题演示/标题样式类型=' text/CSS ' # canvas { margin 336050 px；border:5px纯灰色；箱形阴影：0 px 0px 5px 5px # 494949}/style/head body canvas id=' canvas ' width=' 500 px ' height=' 500 px '/canvas/body script type=' text/JavaScript ' var canvas=document。getelementbyid(' canvas ')；var CTX=画布。get context(' 2d ')；var r_x=250，r _ y=0；var offset _ h=250 var offset _ w=500 var计数=0;定义变量模式=' up var temp=0；var getRPoint=function(x，y) { var r=(Math.pow(x，2) Math.pow(y，2))/(2 * y)；定义变量点={ x: x，y: Math.abs(250 - (r - y))，r : r }；返回点；};函数CTX。begin path()；ctx.arc(attrs.x，attrs.y，attrs.r，attrs.startAngle || 0，attrs.endAngle || Math .PI)；CTX。笔画()；} var interval=setInterval(function(){ count；开关（模式){ case ' up ' : temp=count CTX . clear rect(0，0，500，500)；if(count==0)模式='向下返回；} break case ' down ' : temp=36-count；ctx.clearRect(0，0，500，500)；if(count 6==0){ mode=' default '；返回；} break case ' default ' : temp=count-36；if(COuntt==0){ mode=' up '；计数=0;返回；} } arc(getRPoint(250，250-8 * temp))；}, 100);/script/html更多关于射流研究…特效相关内容感兴趣的读者可查看本站专题： 《jQuery动画与特效用法总结》 及《jQuery常见经典特效汇总》

希望本文所述对大家Java脚本语言程序设计有所帮助。