canvas动画气球

            canvas小球的动画

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

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

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

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

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

js是面向对象写的

步骤：先写好封装的函数Random 随机数

suanzi是小球碰撞后运行方向

dong是canvas画的随机圆·························································································································再去new这个构造函数，我一次性for循环new200个球，多少都可以,canvas性能可以的，换js写就会卡炸

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

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

细节可以看代码：

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title> 7
12 </head>
13 <body>
14 <canvas id="wa" width="800" height="400"></canvas>
15
16 </body>
17 </html>
18 <script>
19
20     var hb = wa.getContext('2d');
21     var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];
22
23         var hb=wa.getContext('2d');
24
25     function Random(max, min) {
26         return parseInt(Math.random() * (max - min) + min)
27     }
28     function Run() {
29         var r = Random(40, 20);
30         this.x = Random(wa.width - r, r);
31         this.y = Random(wa.height - r, r);
32         this.z = r;
33         this.c = 'rgba(' + Random(255, 0) + ',' + Random(255, 0) + ',' + Random(255, 0) + ',' + Math.random().toFixed(1) + ')';
34         this.speedx = Random(10, -10);
35         this.speedy = Random(5, -5)
36     }
37
38     Run.prototype.suanzi = function () {
39
40         if (this.speedx == 0) {
41             this.speedx = 6;
42         }
43         if (this.speedy == 0) {
44             this.speedy = -4;
45         }
46
47         if (this.x < this.z || wa.width - this.z < this.x) {
48             this.speedx *= -1;
49         }
50         if (this.y < this.z || wa.height - this.z < this.y) {
51             this.speedy *= -1;
52         }
53         this.x += this.speedx;
54         this.y += this.speedy;
55     };
56
57     Run.prototype.dong = function () {
58
59         hb.beginPath();
60         hb.arc(this.x, this.y, this.z, 0, Math.PI * 2);
61
62         hb.fillStyle = this.c;
63         hb.fill();
64         hb.closePath();
65
66     };
67
68
69     var palys = [];
70     for (var i = 0; i < 200; i++) {
71         var play = new Run();
72         play.dong();
73         palys.push(play);
74     }
75
76     setInterval(function () {
77         hb.clearRect(0, 0, wa.width, wa.height);
78         for (var j = 0; j < palys.length; j++) {
79             palys[j].suanzi();
80             palys[j].dong();
81             console.log(palys[0])
82         }
83     }, 10);
84
85
86 </script>

posted @ 2017-05-20 17:31 我不喜欢高姿态的家伙阅读(...) 评论(...) 编辑收藏

canvas动画气球相关推荐

android气球上升的属性动画,html5 canvas告白气球上升背景动画特效
特效描述:html5 canvas 告白气球上升背景动画特效.html5基于canvas绘制各种卡通气球上升动画.告白气球背景动画特效. 代码结构 1. 引入JS 2. HTML代码 Balloon ...
canvas动画3：交互
canvas动画3 时隔很久,本人终于又写博客了(重度拖延症),把之前留下的canvas交互动画讲一讲. 电脑上的交互,指的是鼠标和键盘,我们今天主要用的是鼠标. 既然是鼠标的话,就要获取鼠标的各种事 ...
构造函数 + 原型链继承 + 临摹面向对象模式的canvas动画框架
感谢谢帅shawn分享的canvas动画框架,我再来分一次 //动画框架 http://neekey.net/blog/2011/05/11/canvas-%E7%AE%80%E5%8D%95%E5% ...
canvas动画简单操作
canvas动画小球滚动效果关键api: window.requestAnimationFrame(draw) 会递归调用draw函数,替代setIntervalvar x = 20; var s ...
canvas动画 - 背景线条 - 应用篇
Canvas纯色背景+线条波动效果图如下: 代码如下: <!DOCTYPE html> <html> <head><meta charset="U ...
《每周一点canvas动画》——圆周运动
接<每周一点canvas动画>--波形运动圆周运动可以分为两种基本的形式:正圆运动和椭圆运动. 在讲解圆周运动之前,必不可少的数学公式即将袭来.so,各位骚年们,请护好自己的膝盖.听不懂 ...
7 个顶级的 HTML5 Canvas 动画赏析
HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...
canvas动画:黑客帝国_使用Canvas API进行动画处理-第3部分：重力和动态渲染
canvas动画:黑客帝国 Over in Part 2 of this series we created a ball that would ricochet around the screen ...
canvas动画时钟动画太阳系动画动态蚂蚁线全景照片
canvas给我们提供了绘图API,这些API基于JavaScript实现,那么我们可以方便的实现一些动画,在这里我们将展示几个经典的动画绘制技巧,包括:时钟,太阳系,动态蚂蚁线,全景照片动画绘制的 ...

canvas动画气球

canvas动画气球

canvas动画气球相关推荐

最新文章

热门文章