"Мандала" це геометричний символ складної структури з декількома внутрішніми колами які є сегментовані або форми лотосу. Для реалізації "мандала" на JavaScript необхідно на полотні canvas малювати кола з різним радіусом.
Створення кіл відбувається за допомогою методів moveTo(), lineTo() та розрахунків синуса і косинуса (Math.sin(), Math.cos()). Це дозволяє більш маніпулювати при малюванні кола ніж стандартним методом arc().
Для створення анімації малюється декілька кіл з плавним зміщенням для кожного.
Створення анімаційних кіл чорного кольору.
var canvas=document.getElementById('canva1');
var contex=canvas.getContext('2d');
canvas.width=500;
canvas.height=500;
var temp=0;
circleWaves=function(centerX,centerY,radius,points,period,offset,color){
contex.fillStyle=color; //задаємо колір кола
contex.beginPath();
for(var i=0, t, x, y, r2; i<points; i++){
t=i*2*Math.PI/points;
r2=radius + 3 * Math.sin( t * period + offset ); //радіус коливання лінії кола
x=centerX + r2 * Math.cos(t);
y=centerY + r2 * Math.sin(t);
if(i===0)
contex.moveTo(x,y); //вказуємо початкову точку
else
contex.lineTo(x,y); //вказуємо наступну точку
}
contex.closePath();
contex.fill(); //замальовуємо коло
}
draw=function(){
temp+=0.25;
if(temp>365)temp=0;
//очищаємо канву
contex.clearRect(0,0,canvas.width, canvas.height);
//малюємо 12 кіл з зсувом для кожного
for(var i=1;i<=12;i++){
circleWaves(220, 220, 200-i*5, 300, 15, i+temp, 'rgb('+(255/i)+','+(255/i)+','+(255/i)+')');
}
}
times=function(){
draw();
window.requestAnimationFrame(times); //циклічність анімації
}
times();
Малювання анімаційних кольорових кіл різного радіусу, де колір задається за допомогою HSL і змінюється динамічно. Також можна задати використання fill() або stroke() та інші параметри.
function circleWavesColor(canvas,options){
if(options==undefined)options={};
this.options={width:500, height:500, x:200, y:200, radius:180, points:100, period:10, amplitude:3, count:12, speed:0.25, direct:'left', paint:'fill'};
for(let a in this.options)this.options[a]=(a in options?options[a]:this.options[a]);
this.canvas=canvas;
this.contex=this.canvas.getContext('2d');
this.canvas.width=this.options.width;
this.canvas.height=this.options.height;
this.temp=0;
//метод малювання кола
this.fill=function(radius,offset,color){
if(this.options.paint==='fill')
this.contex.fillStyle=color;
else
this.contex.strokeStyle=color;
this.contex.beginPath();
for(let i=0, t, x, y, r2; i<this.options.points; i++){
t=i*2*Math.PI/this.options.points;
if(this.options.direct==='left')
r2=radius+this.options.amplitude*Math.sin(t*this.options.period+offset);
else
r2=radius-this.options.amplitude*Math.sin(t*this.options.period-offset);
x=this.options.x+r2*Math.cos(t);
y=this.options.y+r2*Math.sin(t);
if(i===0)
this.contex.moveTo(x,y);
else
this.contex.lineTo(x,y);
}
this.contex.closePath();
if(this.options.paint==='fill')
this.contex.fill();
else
this.contex.stroke();
}
//метод для малювання декілька кіл зі зміщенням
this.draw=function(){
this.temp+=this.options.speed;
if(this.temp>365)this.temp=0;
//очищаємо полотно
this.contex.clearRect(0, 0, this.canvas.width, this.canvas.height);
//цикл для малювання декількох кіл з зменшенням радіусу і іншим кольором
for(let i=1;i<=this.options.count;i++){
this.fill(this.options.radius-i*5, i+this.temp, 'hsl('+(this.temp-i*10)+',50%,50%)');
}
}
//циклічний запуск для створення анімації
this.animation=function(){
this.draw();
window.requestAnimationFrame(this.animation.bind(this));
}
this.draw(); //малюємо кола
}
var kolo = new circleWavesColor(document.getElementById('canva'), {points:100, period:10, amplitude:3, count: 35, speed:0.25, direct:"stroke", paint:"fill"});
kolo.animation(); //запускаємо анімацію
Приклад зміни параметрів
| width: | |
| height: | |
| x: | |
| y: | |
| radius: | |
| points: | |
| period: | |
| amplitude: | |
| count: | |
| speed: | |
| direct: | |
| paint: |