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 相关文章推荐
js鼠标左右键 键盘值小结
Jun 11 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
jQuery EasyUi 验证功能实例解析
Jan 06 Javascript
vue-router 学习快速入门
Mar 01 Javascript
JavaScript mixin实现多继承的方法详解
Mar 30 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
js实现弹窗效果
Aug 09 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
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
PHP中文分词的简单实现代码分享
2011/07/17 PHP
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
PHP查询快递信息的方法
2015/03/07 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
Python解决走迷宫问题算法示例
2018/07/27 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
python实现图片识别汽车功能
2018/11/30 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
Django在Model保存前记录日志实例
2020/05/14 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
加拿大留学自荐信
2014/01/28 职场文书
军训教官感言
2014/03/02 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
平安工地汇报材料
2014/08/19 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
雷峰塔导游词
2015/02/09 职场文书
团委工作总结2015
2015/04/02 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
校运会通讯稿
2015/07/18 职场文书
区域销售大会开幕词
2016/03/04 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python