php 声波图,Canvas 美丽的声波图
JavaScript
語言：
JaveScriptBabelCoffeeScript
確定
//object
var Obj = {
circle: new Array(10),
radius: 200,
noise: 20,
speed: 0.3,
size: 700,
//color a = background color; color b = object color
color: {
a: 'hsla(280, 95%, 5%, 1)',
b: 'hsla(255, 255%, 255%, .8)'
},
//X & Y positions
X: function(x) {
return Obj.c.width / 2 + x;
},
Y: function(y) {
return Obj.c.height / 2 - y;
},
//behavior
Circle: function(i) {
this.r = Obj.radius - i * Obj.radius / Obj.circle.length;
this.e = i % 2 ? true : false;
this.max = Math.random() * Obj.noise;
this.min = -Math.random() * Obj.noise;
this.val = Math.random() * (this.max - this.min) + this.min;
},
//clearing
Clear: function() {
Obj.$.fillStyle = Obj.color.a;
Obj.$.fillRect(0, 0, Obj.c.width, Obj.c.height);
},
//shape changing
Change: function(C) {
for (var i = 0; i < Obj.size; i++) {
var a = i * Math.PI * 2 / Obj.size;
var x = Math.cos(a) * (C.r - C.val * Math.cos(i / 4));
var y = Math.sin(a) * (C.r - C.val * Math.cos(i / 4));
Obj.$.fillStyle = Obj.color.b;
Obj.$.fillRect(Obj.X(x), Obj.Y(y), 1, 1);
}
Obj.Check(C);
},
//noise level checks
Check: function(C) {
C.val = C.e ? C.val + Obj.speed : C.val - Obj.speed;
if (C.val < C.min) {
C.e = true;
C.max = Math.random() * Obj.noise;
}
if (C.val > C.max) {
C.e = false;
C.min = -Math.random() * Obj.noise;
}
},
//update object
Update: function() {
Obj.Clear();
for (var i = 0; i < Obj.circle.length; i++) {
Obj.Change(Obj.circle[i]);
}
},
//draw object
Draw: function() {
Obj.Update();
requestAnimationFrame(Obj.Draw, Obj.c);
},
//set circles
Set: function() {
for (var i = 0; i < Obj.circle.length; i++) {
Obj.circle[i] = new Obj.Circle(i);
}
},
//size control
Size: function() {
Obj.c.width = window.innerWidth / 2;
Obj.c.height = window.innerHeight / 2;
},
//get canvas
Run: function() {
Obj.c = document.querySelector('canvas');
Obj.$ = Obj.c.getContext('2d');
window.addEventListener('resize', Obj.size, false);
},
//start
Init: function() {
Obj.Run();
Obj.Size();
Obj.Set();
Obj.Draw();
}
};
Obj.Init();
總結
以上是生活随笔為你收集整理的php 声波图,Canvas 美丽的声波图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php控制文本换行,css如何控制文字换
- 下一篇： 动态规划算法php,php算法学习之动态