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程序设计有所帮助。
相关推荐
-
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
-
Canvas 制作动态进度加载水球详解及实例代码
Canvas 动态进度加载水球 前言 之前看到一些球型的动态加载的效果,一直想自己动手做一个,正好这段时间重温了一个Canvas,所以就尝试了一下. 实现思路 关于水波的实现,使用了sin()函数,通过每一帧不断的移动sin()函数曲线,实现水波动态效果.然后,通过绘制圆形路径,进行clip(),实现球型效果. sin()函数相关 这里说一下sin()函数的相关基础,对于绘制水波的影响. 看一下图,回顾一下中学sin()函数的基础. 从图中可以看出,当函数为sin(x)时,值域为[-1, 1],
-
canvas实现动态小球重叠效果
前面的话 在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动.但是,如果用canvas去实现,却是另一种思路.本文将详细介绍canvas动态小球重叠效果 静态小球 首先,生成随机半径.随机位置的50个静态小球 <button id="btn">按钮</button> <canvas id="canvas" width="500" height="300" style=&quo
-
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.
-
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
最近基于jQuery和Bootstrap框架实现了一个仿知乎动态列表的前端效果,基本实现了和知乎动态列表相同的效果.如下: 1.基本列表项 2.列表项全文展开.折叠(图中为展开第一项) 3.评论项展开 4.列表数据加载(加载全部) 5.带动画效果的点赞功能 6.回复列表的hover显示功能 HTML代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta h
-
jquery canvas生成带有二维码的海报
本文实例为大家分享了jquery canvas生成带有二维码海报的具体代码,供大家参考,具体内容如下 需求:点击图片弹窗生成带有二维码的海报. 遇到相关问题: 1.生成的图片会模糊.不清晰. 2. 苹果手机和安卓手机 文字位置和字体大小有差异. 引入所需要的文件 //jquery.js <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js&qu
-
jquery canvas绘制图片验证码实例
本文实例为大家分享了jquery canvas绘制图片验证码的具体代码,供大家参考,具体内容如下 CSS .identify-code{ position: absolute; right: 6px; top: 50%; width: 118px; height: 40px; margin: -21px 0 0 0; } HTML <span id="code" class="identify-code"> <canvas class="
-
jQuery 动态粒子效果示例代码
1.js部分 var RENDERER = { PARTICLE_COUNT : 1000, PARTICLE_RADIUS : 1, MAX_ROTATION_ANGLE : Math.PI / 60, TRANSLATION_COUNT : 500, init : function(strategy){ this.setParameters(strategy); this.createParticles(); this.setupFigure(); this.reconstructMetho
-
jQuery实现动态粒子效果
本文实例为大家分享了jQuery实现动态粒子效果的具体代码,供大家参考,具体内容如下 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=&quo
-
jquery实现像栅栏一样左右滑出式二级菜单效果代码
本文实例讲述了jquery实现像栅栏一样左右滑出式二级菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了jquery实现像栅栏一样的左右滑出式二级菜单,会向左或向右滑出,支持中英文,使用时别忘了引入jquery插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-right-show-nav-menu-codes/ 具体代码如下: <!DOCTYPE html> <head> <meta ht
-
jQuery实现响应鼠标背景变化的动态菜单效果代码
本文实例讲述了jQuery实现响应鼠标背景变化的动态菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery响应鼠标背景变化的动态菜单,菜单的背景在鼠标放上后有所变化,这款菜单的实现主要是使用了图片,修改菜单的时候要修改图片,有些麻烦,不过效果不错,引入的jquery插件是1.7版本,高版本jQuery未测试,应该也可以啦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-cha-bg-pic-menu-co
-
jQuery实现弹出带遮罩层的居中浮动窗口效果
本文实例讲述了jQuery实现弹出带遮罩层的居中浮动窗口效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pop window</title> <style> *{ padding: 0; margin: 0; } .hide{ display: none