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 = 300;
    var canvasWidth = 300;
    var g = 9.8;
    //x, y, vo, r
    function HorizenCast(context, settings) {
      var _self = this;
      $.extend(_self, settings);
      _self.xo = _self.x;
      _self.yo = _self.y;
      HorizenCast.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+")";
      }
      _self.cast = function () {
        if (_self.x > canvasWidth - _self.r || _self.y > canvasHeight - _self.r) {
          return;
        }
        var time = (new Date().getTime() - _self.prevTime) / 1000,
          x = _self.xo +_self.vo * time,
          y = _self.yo + 1 / 2 * g * time * time;
        context.beginPath();
        context.fillStyle = HorizenCast.createColor();
        context.arc(_self.x, _self.y, _self.r, 0, 2 * Math.PI);
        context.fill();
        context.closePath();
        _self.x = x;
        _self.y = y;
        setTimeout(function () {
          _self.cast();
        }, 30);
      }
      _self.prevTime = new Date().getTime();
      _self.cast();
    }
    $(document).ready(function () {
      var canvas = document.getElementById("canvas");
      var context = canvas.getContext('2d');
      new HorizenCast(context, { x: 0, y: 0, vo: 100, r: 5 });
      new HorizenCast(context, { x: 0, y: 0, vo: 90, r: 5 });
      new HorizenCast(context, { x: 0, y: 0, vo: 80, r: 5 });
      new HorizenCast(context, { x: 0, y: 0, vo: 70, r: 5 });
      new HorizenCast(context, { x: 0, y: 0, vo: 60, r: 5 });
      new HorizenCast(context, { x: 0, y: 0, vo: 50, r: 5 });
      new HorizenCast(context, { x: 0, y: 0, vo: 40, r: 5 });
      new HorizenCast(context, { x: 0, y: 0, vo: 30, r: 5 });
      new HorizenCast(context, { x: 0, y: 0, vo: 20, r: 5 });
      new HorizenCast(context, { x: 0, y: 0, vo: 10, r: 5 });
      new HorizenCast(context, { x: 0, y: 0, vo: 5, r: 5 });
    });
  </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="300" height="300"></canvas>
 <hr />
 </center>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
详解 javascript对象创建模式
Oct 30 Javascript
基于JavaScript实现年月日三级联动
Jun 22 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 #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
You might like
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
2013/12/31 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
python自动发邮件库yagmail的示例代码
2018/02/23 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
Python中dict和set的用法讲解
2019/03/28 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
详解Python中import机制
2020/09/11 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
介绍一下游标
2012/01/10 面试题
机械设计专业应届生求职信
2013/11/21 职场文书
怎样写好自我鉴定
2013/12/04 职场文书
专家推荐信模板
2014/05/09 职场文书
新郎结婚感言
2015/07/31 职场文书
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android
Mybatis是这样防止sql注入的
2021/12/06 Java/Android