本文实例讲述了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=0；var canvasWidth=0；var g=9.8函数Cast(上下文，castSettings){ Cast。create color=function(){ var r=math。圆(数学。random()* 256)，g=Math.round(Math.random() * 256)，b=math。圆(数学。random()* 256)；返回“RGB(‘r’、‘g’、‘b’)”；} var _ self=this//x，y，弧度，r，v美元.extend(_self，castSettings)；_ self。弧度=_ self。弧度/180 *数学.PI；_ self。VO=_ self。五；_ self。vxo=数学。cos(_ self。弧度)* _ self。VO；_ self。vyo=数学sin(_ self。弧度)* _ self。VO；控制台。日志(' vyo : ' _ self)。vyo ' :v XO : ' _ self。vxo ' : ' _ self。弧度)；_self.prevTime=新日期()。getTime()；_ self。XO=_ self。x；_ self。yo=_ self。y；_ self。cast=function(){ if(_ self。x canvasWidth-_ self。r | | _ self。你好。哟){ return} var time=(新日期()。getTime()-_ self。prev time)/1000；var x=_ self.vxo * timevar y=_ self。vyo * time-1/2 * g * time * time；控制台。日志(时间' : ' _ self。yo ' : ' _ self。XO ' : ' y)；语境。begin path()；语境。fillstyle=cast。create color()；context.arc(x _self.xo，_self.yo- y，_self.r，0，2 * Math .PI)；语境。fill()；语境。close path()；_ self。x=x _ self。XO；_ self。y=_ self。yo-y；setTimeout(函数(){ _ self。cast()；}, 30);} _ self。cast()；} $(文档)。ready(function(){ var canvas=$(' # canvas ')；var context=canvas.get(0).getContext(' 2d ')；canvasHeight=canvasHeight()；canvasWidth=画布。宽度()；新演职人员(上下文、{ x: 0、y: 400、v: 70、r: 5、弧度： 20 })；新演职人员(上下文、{ x: 0、y: 400、v: 70、r: 5、弧度： 30 })；新演职人员(上下文、{ x: 0、y: 400、v: 70、r: 5、弧度： 40 })；新演职人员(上下文、{ x: 0、y: 400、v: 70、r: 5、弧度： 50 })；新演职人员(上下文、{ x: 0、y: 400、v: 70、r: 5、弧度： 60 })；新演职人员(上下文、{ x: 0、y: 400、v: 70、r: 5、弧度： 70 })；});/script style type=' text/CSS ' H2 { color : gray；线高：50 px} #画布{背景： # DDDDDD}/style/head dy center H3帆布实现斜抛效果/H3 HR/画布id='画布'宽度=' 500 '高度=' 500 '/画布HR//中心/正文/html更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery动画与特效用法总结》 及《jQuery常见经典特效汇总》

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