jQuery画布实现的球体平抛及颜色动态变换效果

本文实例讲述了jQuery画布实现的球体平抛及颜色动态变换效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title画布平抛/title脚本src=' http : jquery-1。7 .1 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript ' var canvasHeight=300；var canvasWidth=300var g=9.8//x，y，vo，r函数HorizenCast(上下文，设置){ var _ self=this$.extend(_self，设置);_ self。XO=_ self。x；_ self。yo=_ self。y；horizencast。create color=function(){ var r=math。圆(数学。random()* 256)，g=Math.round(Math.random() * 256)，b=math。圆(数学。random()* 256)；返回“RGB(‘r’、‘g’、‘b’)”；} _ self。cast=function(){ if(_ self。x canvasWidth-_ self。r | | _ self。y canvasHeight-_ self。r){ return；} var time=(新日期()。getTime() - _self.prevTime)/1000，x=_self.xo _self.vo * time，y=_ self。yo 1/2 * g * time * time；语境。begin path()；语境。fillstyle=horizencast。创建颜色()；context.arc(_self.x，_self.y，_self.r，0，2 * Math .PI)；语境。fill()；语境。close path()；_ self.x=x_ self.y=ysetTimeout(函数(){ _ self。cast()；}, 30);} _self.prevTime=新日期()。getTime()；_ self。cast()；} $(文档)。ready(function(){ var canvas=document。getelementbyid(' canvas ')；var上下文=canvas。get context(' 2d ')；new HorizenCast(context，{ x: 0，y: 0，vo: 100，r : 5 })；new HorizenCast(context，{ x: 0，y: 0，vo: 90，r : 5 })；new HorizenCast(context，{ x: 0，y: 0，vo: 80，r : 5 })；new HorizenCast(context，{ x: 0，y: 0，vo: 70，r : 5 })；new HorizenCast(context，{ x: 0，y: 0，vo: 60，r : 5 })；new HorizenCast(context，{ x: 0，y: 0，vo: 50，r : 5 })；new HorizenCast(context，{ x: 0，y: 0，vo: 40，r : 5 })；new HorizenCast(context，{ x: 0，y: 0，vo: 30，r : 5 })；new HorizenCast(context，{ x: 0，y: 0，vo: 20，r : 5 })；new HorizenCast(context，{ x: 0，y: 0，vo: 10，r : 5 })；new HorizenCast(context，{ x: 0，y: 0，vo: 5，r : 5 })；});/script style type=' text/CSS ' H2 { color : gray；线高：50 px} #画布{背景： # DDDDDD}/style/head dy center H3帆布实现平抛效果/H3 HR/画布id='画布'宽度=' 300 '高度=' 300 '/画布HR//中心/正文/html更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery动画与特效用法总结》 及《jQuery常见经典特效汇总》

希望本文所述对大家jQuery程序设计有所帮助。