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 = 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+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.
-
canvas实现动态小球重叠效果
前面的话 在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动.但是,如果用canvas去实现,却是另一种思路.本文将详细介绍canvas动态小球重叠效果 静态小球 首先,生成随机半径.随机位置的50个静态小球 <button id="btn">按钮</button> <canvas id="canvas" width="500" height="300" style=&quo
-
Canvas 制作动态进度加载水球详解及实例代码
Canvas 动态进度加载水球 前言 之前看到一些球型的动态加载的效果,一直想自己动手做一个,正好这段时间重温了一个Canvas,所以就尝试了一下. 实现思路 关于水波的实现,使用了sin()函数,通过每一帧不断的移动sin()函数曲线,实现水波动态效果.然后,通过绘制圆形路径,进行clip(),实现球型效果. sin()函数相关 这里说一下sin()函数的相关基础,对于绘制水波的影响. 看一下图,回顾一下中学sin()函数的基础. 从图中可以看出,当函数为sin(x)时,值域为[-1, 1],
-
JS Canvas定时器模拟动态加载动画
本文实例为大家分享了Canvas定时器动态加载动画,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <canvas id="canva
-
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.w
-
JS+HTML5 Canvas实现简单的写字板功能示例
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS写字板</title> <script src="http://libs.baidu.com/jquery/2.0.0
-
VUE+Canvas实现简单五子棋游戏的全过程
前言 在布局上,五子棋相比那些目标是随机运动的游戏,实现起来相对简单许多,思路也很清晰,总共分为: (1)画棋盘: (2)监听点击事件画黑白棋子: (3)每次落子之后判断是否有5子相连,有则赢. 最复杂的恐怕就是如何判断五子棋赢了,那么就先从简单的开始,画个棋盘吧~ 1.画棋盘 棋盘很简单,我们画个15*15的棋盘,横线竖线相交错: drawCheckerboard() { // 画棋盘 let _this = this; _this.ctx.beginPath(); _this.ctx.fil
-
jQuery实现的简单动态添加、删除表格功能示例
本文实例讲述了jQuery实现的简单动态添加.删除表格功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 我们</title> <style> * { padding: 0; margin: 0;
-
jQuery实现的简单折叠菜单(折叠面板)效果代码
本文实例讲述了jQuery实现的简单折叠菜单(折叠面板)效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的折叠菜单,可展开一些内容,实际上称它为一个面板比较好,是一个折叠面板,使用了jQuery1.6.2插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-toggle-zd-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD X
-
js+html5实现canvas绘制简单矩形的方法
本文实例讲述了js+html5实现canvas绘制简单矩形的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not sup
-
jquery实现最简单的滑动菜单效果代码
本文实例讲述了jquery实现最简单的滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一款最简单的jQuery下拉滑出菜单,jQuery代码实现,这里没有过多的去修饰菜单,仅是一些基本的实现,特别是对学习jQuery是个不错的参考实例,这里使用了一个jquery封装库文件jquery.tools.min.js,从外部引入,测试时候可能会因载入不成功而看不到效果,刷新一下网页即可解决此问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/
-
jQuery基于扩展简单实现倒计时功能的方法
本文实例讲述了jQuery基于扩展简单实现倒计时功能的方法.分享给大家供大家参考,具体如下: jQuery.fn.countDown = function(settings,to) { settings = jQuery.extend({ startFontSize: '36px', endFontSize: '12px', duration: 1000, startNumber: 10, endNumber: 0, callBack: function() { } }, settings);
-
jQuery简单实现input文本框内灰色提示文本效果的方法
本文实例讲述了jQuery简单实现input文本框内灰色提示文本效果的方法.分享给大家供大家参考,具体如下: $(function(){ $(".grayTips").each(function(){ //遍历每个文本框 var objTextBox=$(this); var oldText=$.trim(objTextBox.val()); objTextBox.css("color","#888"); objTextBox.focus(fun