Язык программирования:
Javascript
Среда программирования:
Notepad++
<!DOCTYPE html> <html> <body> <canvas id="canvas" width="800" height="800" style="border:1px solid white;border-radius: 25px;display: block; margin: auto auto; padding: 0; background: radial-gradient(#6666ff, #ffff00);"></canvas> <script> //Инициализируем канвас var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); //Задаём ширину и высоту var cw = 800, cx = cw / 2; var ch = 800, cy = 2 * ch / 3; var frames = 0; var requestId = 0; var rad = (Math.PI / 180); var r = 50, x, y; //Создаём функцию отрисовки спирали function Draw() { frames++; var a = frames * rad; ctx.clearRect(0, 0, 800, 800); for (var i = 1; i < 250; i += .5) { var t = i * rad; ctx.beginPath(); x = cx + r * t * Math.sin(6 * t + a); y = cy + (r / 2) * Math.cos(a) * t * Math.cos(6 * t + a) - (r + r / 2 * (Math.sin(a))) * t; ctx.arc(x, y, i / 21, 0, 2 * Math.PI); ctx.fillStyle = Gradient(x, y, i / 10) ctx.fill(); } requestId = window.requestAnimationFrame(Draw); } //Создаём функцию Радиального Градиента и задаём цвета function Gradient(x, y, r) { gradient = ctx.createRadialGradient(x - r / 2, y - r / 2, 0, x, y, r); gradient.addColorStop(0, '#6666ff'); gradient.addColorStop(1, '#ffccff'); return gradient; } Draw(); </script> </head> </body> </html>
| Прикрепленный файл | Размер |
|---|---|
| DEMO2.rar | 908 байтов |