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 密码强弱度检测万能插件
Feb 25 Javascript
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
Vuex的各个模块封装的实现
Jun 05 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判断远程url是否有效的几种方法小结
2011/10/08 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
JavaScript 异步调用
2017/10/25 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
浅谈react性能优化的方法
2018/09/05 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
Python判断直线和矩形是否相交的方法
2015/07/14 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
师范应届生教师求职信
2013/11/05 职场文书
面试后感谢信
2014/02/01 职场文书
司仪主持词两篇
2014/03/22 职场文书
英文演讲稿
2014/05/15 职场文书
会计专业自荐信
2014/06/03 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
部门2014年度工作总结
2014/11/12 职场文书
2015入党自荐书范文
2015/03/05 职场文书
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android