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 相关文章推荐
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
基于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
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
vuex的使用步骤
2021/01/06 Vue.js
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
最好的商品表达自己:Cafepress
2019/09/04 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
综合实践教学反思
2014/01/31 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
化工厂员工工作总结
2015/10/15 职场文书
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers