jQuery+canvas实现的球体平抛及颜色动态变换效果
2016-01-28 09:52
906 查看
本文实例讲述了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程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- Canvas 在高清屏下绘制图片变模糊的解决方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法