基于帆布实现的钟摆效果完整实例

本文实例讲述了基于帆布实现的钟摆效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

！DOCTYPE html html标题演示/标题样式类型=' text/CSS '正文{ margin :0划水：0;} #画布{ border:2px纯灰色；盒影：0 px 0px 2px 2px # 494949}/style/head body canvas id=' canvas ' width=' 500 px ' height=' 500 px '/canvas script type=' text/JavaScript ' var canvas=document。getelementbyid(' canvas ')；var CTX=画布。get context(' 2d ')；var r=250var颜色列表=' abcdefbcdef 0123456789 ' .拆分("");var colorListLength=colorlist。长度；var color=function(){ var _ color=' # '；for(var I=0；i6；I){ _ color=color list[数学。圆(数学。random()*颜色列表长度)]；} return _ color }var create ARc=function(attrs){ CTX。save()；CTX。begin path()；CTX。FillStyle=attrs。color | | color()；ctx.arc(attrs.x，attrs.y，attrs.r，0，Math .PI * 2)；CTX。close path()；CTX。fill()；CTX。restore()；};var createLine=函数(从，到){ CTX。save()；CTX。begin path()；ctx.moveTo(from.x，from。y)；ctx.lineTo(To.x，to。y)；CTX。笔画()；CTX。close path()；CTX。restore()；} var create all=function(to){ create arc({ x : 250，y: 0，r: 10，color : ' black ' })；createArc({x: to.x，y: to.y，r: 20，color : ' black ' })；createLine({x: 250，y: 0}，{x: to.x，y : to。y })；};var MinAngle=0；var maxAngle=数学；var addAngle=Math.PI/24; var angle=minAngle；定义变量模式='左；var interval=setInterval(函数(){ var y=Math.sin(角度)* r 200var x=Math.cos(角度)* r 250 switch(mode){ case ' left ' : CTX。透明矩形(0，0，500，500)；createAll({x: x，y :y })；angle=addAngleif(angle MaxAngle){ mode=' right '；angle-=addAngle；返回；} CTX :号右侧行李箱。透明矩形(0，0，500，500)；createAll({x: x，y :y })；angle-=addAngle；if(angle minAngle){ mode=' default '；角度=添加角度返回；} break case ' default ' : create all({ x : x，y :y })；angle=addAngleif(angle MaxAngle){ mode=' left '；角度=minAngle返回；} break} }，50)；/脚本/正文/html更多关于射流研究…特效相关内容感兴趣的读者可查看本站专题： 《jQuery动画与特效用法总结》 及《jQuery常见经典特效汇总》

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