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 相关文章推荐
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
javascript闭包的理解和实例
Aug 12 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
js canvas实现QQ拨打电话特效
May 10 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
关于vue面试题汇总
Mar 20 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 Javascript
vue实现移动端拖动排序
Aug 21 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实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
Python易忽视知识点小结
2015/05/25 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
Python中遍历列表的方法总结
2019/06/27 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
中介公司区域经理岗位职责范本
2014/03/02 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
2014年党务公开方案
2014/05/08 职场文书
法人委托书范本
2014/09/15 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python