这篇文章主要介绍了jquery+canvas实现的球体平抛及颜色动态变换效果,通过jquery结合html5的canvas技术调用时间函数实时进行数学运算,最终实现球体平抛及颜色动态变换的效果,需要的朋友可以参考下
本文实例讲述了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右下角旋转环状菜单特效的实现
基于json格式数据的简单jquery幻灯片插件(jquery-slider)的介绍
以上就是jquery和canvas实现的球体平抛及颜色动态变换效果的详细内容。