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类中获取外部函数名的方法
Aug 19 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 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带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
PHP编程函数安全篇
2013/01/08 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
JavaScript 拾漏补遗
2009/12/27 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
python实现人人网登录示例分享
2014/01/19 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
Python hashlib模块实例使用详解
2019/12/24 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
法律七进实施方案
2014/03/15 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
先进个人事迹材料
2014/12/29 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python