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编程中的同步与异步机制
Jun 24 Javascript
详解javascript new的运行机制
Jan 26 Javascript
Vue表单实例代码
Sep 05 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
javaScript Array api梳理
Mar 31 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
一棵php的类树(支持无限分类)
2006/10/09 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
php除数取整示例
2014/04/24 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
python实现数据图表
2017/07/29 Python
python爬虫基本知识
2018/03/05 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
Python实现AI换脸功能
2020/04/10 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
经典优秀个人求职自荐信格式
2013/09/25 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
2015年推普周活动总结
2015/03/27 职场文书
监护人证明
2015/06/19 职场文书
社区服务理念口号
2015/12/25 职场文书
领导干部学习心得体会
2016/01/23 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang