这篇文章主要介绍了jquery+canvas实现的球体平抛及颜色动态变换效果,通过jquery结合html5的canvas技术调用时间函数实时进行数学运算,最终实现球体平抛及颜色动态变换的效果,需要的朋友可以参考下
本文实例讲述了jQuery+canvas实现的球体平抛及颜色动态变换效果。分享给大家供大家参考，具体如下：
运行效果截图如下：
具体代码如下：
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">canvas平抛 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 }); }); h2 { color:Gray; line-height:50px; } #canvas { background:#DDDDDD;}canvas实现平抛效果
登录后复制
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
jQuery右下角旋转环状菜单特效的实现
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)的介绍
以上就是jQuery和canvas实现的球体平抛及颜色动态变换效果的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2747588.html
