jQuery+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相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。
-
本文向大家介绍jQuery+canvas实现简单的球体斜抛及颜色动态变换效果，包括了jQuery+canvas实现简单的球体斜抛及颜色动态变换效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery+canvas实现简单的球体斜抛及颜色动态变换效果。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQu
-
本文向大家介绍js+HTML5实现canvas多种颜色渐变效果的方法，包括了js+HTML5实现canvas多种颜色渐变效果的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js+HTML5实现canvas多种颜色渐变效果的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的web程序设计有所帮助。
-
本文向大家介绍jQuery实现的文字hover颜色渐变效果实例，包括了jQuery实现的文字hover颜色渐变效果实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的文字hover颜色渐变效果。分享给大家供大家参考，具体如下： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery扩展技
-
本文向大家介绍Unity3D实现渐变颜色效果，包括了Unity3D实现渐变颜色效果的使用技巧和注意事项，需要的朋友参考一下 基于unity3D实现渐变颜色的简单脚本，代码很少，就不废话了，直接上代码和效果图。 效果图： 虽然支持的内容不多，但是小而精，希望对大家有用。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍Canvas实现动态的雪花效果，包括了Canvas实现动态的雪花效果的使用技巧和注意事项，需要的朋友参考一下 效果如下： 代码如下： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
-
本文向大家介绍jquery实现标题字体变换的滑动门菜单效果，包括了jquery实现标题字体变换的滑动门菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery实现标题字体变换的滑动门菜单效果。分享给大家供大家参考。具体如下： 这里使用jquery字体会变大的网页滑动门菜单，当把鼠标放在“门”上的时候，门内的菜单字体会变大变色，对应的内容同时切换，不知如何形容本效果，所以就叫字体