jQuery+canvas实现的球体平抛及颜色动态变换效果


Posted in Javascript onJanuary 28, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
Angular2之二级路由详解
Aug 31 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 #Javascript
基于javascript实现动态显示当前系统时间
Jan 28 #Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 #Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 #Javascript
使用node+vue.js实现SPA应用
Jan 28 #Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 #Javascript
javascript实现随机显示星星特效
Jan 28 #Javascript
You might like
解析php中die(),exit(),return的区别
2013/06/20 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
Javascript String.replace的妙用
2009/09/08 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
详解Python中import机制
2020/09/11 Python
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
雷蛇美国官网:Razer
2020/04/03 全球购物
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
自主招生自荐信格式
2013/12/03 职场文书
土木工程专业个人求职信
2013/12/30 职场文书
教师评优事迹材料
2014/01/10 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书