本文實例講述了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 = 300; var canvasWidth = 300; var g = 9.8; //x, y, vo, r function HorizenCast(context, settings) { var _self = this; $.extend(_self, settings); _self.xo = _self.x; _self.yo = _self.y; HorizenCast.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+")"; } _self.cast = function () { if (_self.x > canvasWidth - _self.r || _self.y > canvasHeight - _self.r) { return; } var time = (new Date().getTime() - _self.prevTime) / 1000, x = _self.xo +_self.vo * time, y = _self.yo + 1 / 2 * g * time * time; context.beginPath(); context.fillStyle = HorizenCast.createColor(); context.arc(_self.x, _self.y, _self.r, 0, 2 * Math.PI); context.fill(); context.closePath(); _self.x = x; _self.y = y; setTimeout(function () { _self.cast(); }, 30); } _self.prevTime = new Date().getTime(); _self.cast(); } $(document).ready(function () { var canvas = document.getElementById("canvas"); var context = canvas.getContext('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; line-height:50px; } #canvas { background:#DDDDDD;} </style></head><body> <center> <h3>canvas實現平拋效果</h3> <hr /> <canvas id="canvas" width="300" height="300"></canvas> <hr /> </center></body></html>更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery動畫與特效用法總結》及《jQuery常見經典特效匯總》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
