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 = 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程序设计有所帮助。

Javascript 相关文章推荐
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 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
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 #Javascript
You might like
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python处理文本文件中控制字符的方法
2017/02/07 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
python3 下载网络图片代码实例
2019/08/27 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
python的pip有什么用
2020/06/17 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
Skyscanner波兰:廉价航班
2017/11/07 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
销售人员自我评价
2014/02/01 职场文书
生活小常识广播稿
2014/09/16 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python