canvas小球的动画

我用canvas画布实现的小球动画效果，可以参考下
我用canvas画布实现的小球动画效果，可以参考下
我用canvas画布实现的小球动画效果，可以参考下
我用canvas画布实现的小球动画效果，可以参考下
我用canvas画布实现的小球动画效果，可以参考下

js是面向对象写的

步骤：
先写好封装的函数
Random 随机数
suanzi是小球碰撞后运行方向
dong是canvas画的随机圆
·························································································································
再去new这个构造函数，我一次性for循环new200个球，多少都可以,canvas性能可以的，换js写就会卡炸

弄个定时器，随便时间，setInterval.每次执行清除画布，再重构重新200个球，就有换球的效果了，看上去球就动了

每次都是canvas画的球，所以没有DOM，不会卡顿，性能杠杠的，有兴趣的可以试试吧

细节可以看代码：

1 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <canvas id="wa" width="800" height="400"></canvas>

 </body>

 </html>

 <script>

     var hb = wa.getContext('2d');

     var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];

         var hb=wa.getContext('2d');

     function Random(max, min) {

         return parseInt(Math.random() * (max - min) + min)

     }

     function Run() {

         var r = Random(40, 20);

         this.x = Random(wa.width - r, r);

         this.y = Random(wa.height - r, r);

         this.z = r;

         this.c = 'rgba(' + Random(255, 0) + ',' + Random(255, 0) + ',' + Random(255, 0) + ',' + Math.random().toFixed(1) + ')';

         this.speedx = Random(10, -10);

         this.speedy = Random(5, -5)

     }

     Run.prototype.suanzi = function () {

         if (this.speedx == 0) {

             this.speedx = 6;

         }

         if (this.speedy == 0) {

             this.speedy = -4;

         }

         if (this.x < this.z || wa.width - this.z < this.x) {

             this.speedx *= -1;

         }

         if (this.y < this.z || wa.height - this.z < this.y) {

             this.speedy *= -1;

         }

         this.x += this.speedx;

         this.y += this.speedy;

     };

     Run.prototype.dong = function () {

         hb.beginPath();

         hb.arc(this.x, this.y, this.z, 0, Math.PI * 2);

         hb.fillStyle = this.c;

         hb.fill();

         hb.closePath();

     };

     var palys = [];

     for (var i = 0; i < 200; i++) {

         var play = new Run();

         play.dong();

         palys.push(play);

     }

     setInterval(function () {

         hb.clearRect(0, 0, wa.width, wa.height);

         for (var j = 0; j < palys.length; j++) {

             palys[j].suanzi();

             palys[j].dong();

             console.log(palys[0])

         }

     }, 10);

 </script>

canvas动画气球的更多相关文章

  1. 2015.4.23 贪吃蛇、canvas动画，各种上传工具，url信息匹配以及最全前端面试题等

    1.面向对象贪吃蛇   2.css中:hover 改变图片 页面加载完 第一次鼠标移入会闪一下 这是为啥? 解决方法:你把两张图合成一张图或者是先把图片加载到页面上,然后再hover出来. 解析:图片 ...

  2. HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

     1.js配合传统css属性控制,可以使用setTimeout或者高级的requestAnimationFrame 2.css3 3.svg 4.canvas(当然,这个还是要配合js)   也许这么 ...

  3. 7 个顶级的 HTML5 Canvas 动画赏析

    HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...

  4. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  5. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  6. 《FLASH CC 2015 CANVAS 中文教程》——1、导出canvas动画，文件结构浅析

    注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...

  7. Html5 Canvas动画旋转的小方块；

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  8. 【原创】测试不同浏览器播放canvas动画的平滑程度

    Canvas无疑是HTML5开放式网络平台最激动人心的技术之一.目前,除了IE8以外,各类浏览器的新版本都支持HTML5 Canvas. 程序员需要通过Javascript调用Canvas API.基 ...

  9. HTML5 Canvas动画效果演示

    HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...

随机推荐

  1. UVA-11214 IDA*

    利用迭代加深搜索,枚举需要的皇后数量,进行搜索. 对于10 * 10 的棋盘,最多需要5个皇后就能攻击整个棋盘,当0~4个皇后都不能搜索成功,那么5就不用搜索,直接打印. AC代码: #include ...

  2. (转载,但不知道谁原创)获取SPRING 代理对象的真实实例,可以反射私有方法,便于测试

    /** * 获取 目标对象 * @param proxy 代理对象 * @return * @throws Exception */ public static Object getTarget(Ob ...

  3. cronatab周期性任务

    要执行周期性任务,要保证服务运行.服务名为crond:service crond start ; systemctl start crond; 配置文件 /etc/crontab cron的日志文件 ...

  4. Hadoop压缩

    为什幺要压缩? 压缩会提高计算速度?这是因为mapreduce计算会将数据文件分散拷贝到所有datanode上,压缩可以减少数据浪费在带宽上的时间,当这些时间大于压缩/解压缩本身的时间时,计算速度就会 ...

  5. 跨域问题jsonp

    不得不说的同源政策: 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指域名,协议,端口相同.当一个浏览器的两个tab页 ...

  6. Django使用模板后无法找到静态资源文件

    Django使用模板后无法找到静态资源文件 环境配置 Django版本1.11 python版本3.6.2 前言 在编写Django网站的时候,在涉及模板方面,一些简单的例子都没有问题,但这些例子都有 ...

  7. Davinci DM6446 Codec Engine双核通信环境的搭建

    根据前几篇文章,一个DM6446的系统已经架构完成.但是有很多人都喜欢TI的机制,毕竟双核软件开发对很多工程师来说是非常麻烦的事情,既然TI提供开发套件和开发包,那么直接做OEM就可以了,底层的东西不 ...

  8. FusionCharts封装-单系列图组合

    ChartAction.java: /** * @Title:ChartAction.java * @Package:com.fusionchart.action * @Description:单系列 ...

  9. 大数据处理的三种框架：Storm，Spark和Samza

    许多分布式计算系统都可以实时或接近实时地处理大数据流.下面对三种Apache框架分别进行简单介绍,然后尝试快速.高度概述其异同. Apache Storm 在Storm中,先要设计一个用于实时计算的图 ...

  10. Netty的并发编程实践1：正确使用锁

    很多刚接触多线程编程的开发者,虽然意识到了并发访问可变变量需要加锁,但是对于锁的范围.加锁的时机和锁的协同缺乏认识,往往会导致出现一些问题.下面笔者就结合Netty的代码来讲解下这方面的知识. 打开F ...