Язык программирования:
Javascript
Среда программирования:
Notepad ++
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="785" height="770" style="border:1px solid #d3d3d3;"> </canvas> <script> var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); function area(){// закрашиваем область ctx.fillStyle = "black"; ctx.fillRect(0, 0, 785, 770); } function getDistance(x, y) { // возвращает расстояние от центра до точки(x,y) let dx = 392 - x; let dy = 370 - y; return Math.sqrt((dx * dx) + (dy * dy)); } function draw(){ area(); for (var i = 0; i < 770; i+=pointsDist){ // идем вдоль оси y for (var j = 0; j < 770; j+=pointsDist){ // идем вдоль оси x var margin = 15; // отступ var distance = getDistance(r+j+margin,i+margin)/100; // расстояние от текущей точки до центра для регулировки цвета кругов distance-=addition; //анимация var a = 1-Math.abs(Math.sin(distance)); // парметр цвета - a var rgb = (1-a)*255; // парметры цвета - r,g,b (переход от чёрного к белому, от белого к чёрному) ctx.fillStyle = 'rgba('+ rgb +', ' + rgb +', '+ rgb +', '+ a +')';// устанавливаем цвет ctx.beginPath(); ctx.arc(r+j+margin,i+margin, r, 0, 2 * Math.PI, false); // рисуем круг ctx.closePath(); ctx.fill(); } } } var r = 10;// радиус окружности var pointsDist = 35;// смещение по x var speed = 0.05; // скорость изменения при анимации var addition = 0;// для анимации function animation() { addition+=speed; draw(); requestAnimationFrame(animation); } animation(); </script> </body> </html>