本文實例講述了jQuery+canvas實現簡單的球體斜拋及顏色動態變換效果。分享給大家供大家參考，具體如下：
運行效果截圖如下：
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>canvas簡單斜拋</title> <script src="jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript" > var canvasHeight = 0; var canvasWidth = 0; var g = 9.8; function Cast(context, castSettings) { Cast.createColor = function () { var r = Math.round(Math.random() * 256), g = Math.round(Math.random() * 256), b = Math.round(Math.random() * 256); return "rgb("+r+","+g+","+b+")"; } var _self = this; // x, y, radian, r, v $.extend(_self, castSettings); _self.radian = _self.radian / 180 * Math.PI; _self.vo = _self.v; _self.vxo = Math.cos(_self.radian) * _self.vo; _self.vyo = Math.sin(_self.radian) * _self.vo; console.log("vyo:"+_self.vyo+":vxo:"+_self.vxo+":"+_self.radian); _self.prevTime = new Date().getTime(); _self.xo = _self.x; _self.yo = _self.y; _self.cast = function () { if (_self.x > canvasWidth - _self.r || _self.y > _self.yo) { return; } var time = (new Date().getTime() - _self.prevTime) / 1000; var x = _self.vxo * time; var y = _self.vyo * time - 1 / 2 * g * time * time; console.log(time+":"+_self.yo+":"+_self.xo+":"+y); context.beginPath(); context.fillStyle = Cast.createColor(); context.arc(x + _self.xo, _self.yo- y , _self.r, 0, 2 * Math.PI); context.fill(); context.closePath(); _self.x = x + _self.xo; _self.y = _self.yo - y; setTimeout(function () { _self.cast(); }, 30); } _self.cast(); } $(document).ready(function () { var canvas = $("#canvas"); var context = canvas.get(0).getContext('2d'); canvasHeight = canvas.height(); canvasWidth = canvas.width(); new Cast(context, { x: 0, y: 400, v: 70, r: 5, radian: 20 }); new Cast(context, { x: 0, y: 400, v: 70, r: 5, radian: 30 }); new Cast(context, { x: 0, y: 400, v: 70, r: 5, radian: 40 }); new Cast(context, { x: 0, y: 400, v: 70, r: 5, radian: 50 }); new Cast(context, { x: 0, y: 400, v: 70, r: 5, radian: 60 }); new Cast(context, { x: 0, y: 400, v: 70, r: 5, radian: 70 }); }); </script> <style type="text/css" > h2 { color:Gray; line-height:50px; } #canvas { background:#DDDDDD;} </style></head><body> <center> <h3>canvas實現斜拋效果</h3> <hr /> <canvas id="canvas" width="500" height="500"></canvas> <hr /> </center></body></html>更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery動畫與特效用法總結》及《jQuery常見經典特效匯總》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
