jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
更新时间：2016年01月28日 09:37:01 作者：m1870164
这篇文章主要介绍了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 = 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程序设计有所帮助。
相关文章
本篇文章主要对jQuery实现倒计时进行了实例分析。并附上实例源码，有兴趣的朋友可以下载源码调试运行试试看，希望对大家有所帮助2016-12-12
推荐给大家一款jQuery实现的仿FLASH超炫的导航特效代码，有需要的小伙伴直接拿走吧2014-11-11
这篇文章主要介绍了jQuery中:checked选择器用法,实例分析了:checked选择器的功能、定义及选取选中的复选框或单选按钮时的使用技巧,需要的朋友可以参考下2015-01-01
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果等等，以下为所有代码，感兴趣的朋友可以练练手哈，希望对大家学习有所帮助2013-07-07
这篇文章主要介绍了jQuery自定义动画函数实现方法,形式实例分析了jQuery通过插件结合数学运算实现滑块动画运动的效果,并附完整demo源码供读者下载,需要的朋友可以参考下2015-12-12
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
这篇文章主要介绍了jquery插件fineuploader上传文件很用方法2013-12-12
好长一段时间没有写js代码了，也好长时间没有写文章了,下午闲来无事写了一个 基于jQuery的表单验证插件。首先申明这个插件问题比较多，不过觉得这个东西很有必要。后期持续跟新中，先把自己写的插件原型拿出来晒晒！2010-10-10
图标斜着移动到指定的位置如何实现，本文给予了详细的解决方法，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
jquery 想必大家早已如雷贯耳，本文整理了一些在实际应用中比较常见的功能片段，感兴趣的朋友可以学习下哦，需要改进的地方希望大家不惜指教2013-08-08
这篇文章主要介绍了利用Jquery实现几款漂亮的时间轴示例代码，文中利用Jquery实现了纵向折叠时间轴、纵向鼠标滑动时间轴、纵向可折叠时间轴以及横向时间轴，每种时间轴都给出了完整的示例代码，需要的朋友可以参考学习。2017-02-02
最新评论