Пример:
HTML:
1 |
<canvas id="flowers"></canvas> |
CSS:
1 2 3 4 5 |
#flowers { height: 500px; width: 100%; background: radial-gradient( farthest-corner circle at left bottom, #e1fd3e, #174709); } |
JS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 |
var c = document.getElementById("flowers"); var ctx = c.getContext("2d"); var cw = c.width = c.offsetWidth; var ch = c.height = c.offsetHeight; var cX = cw / 2, cY = ch / 2; var rad = Math.PI / 180; var howMany = 40; var t = 1 / 5; ctx.strokeStyle = "white"; ctx.shadowBlur = 2; ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowColor = "#333"; ctx.globalAlpha = 1; var colors = ["#930c37", "#ea767a", "#ee6133", "#ecac43", "#fb9983", "#f9bc9f", "#f8ed38", "#a8e3f9", "#d1f2fd", "#ecd5f5", "#fee4fd", "#8520b4", "#FA2E59", "#FF703F", "#FF703F", "#F7BC05", "#ECF6BB", "#76BCAD"]; var flowers = []; for (var hm = 0; hm < howMany; hm++) { flowers[hm] = {} flowers[hm].cx = ~~(Math.random() * cw) + 1; flowers[hm].cy = ~~(Math.random() * ch) + 1; flowers[hm].R = randomIntFromInterval(20, 50); flowers[hm].Ri = randomIntFromInterval(5, 7) / 10; flowers[hm].k = randomIntFromInterval(5, 10) / 10; flowers[hm].ki = randomIntFromInterval(2, 7) / 100; flowers[hm].K = randomIntFromInterval(5, 16) / 10; flowers[hm].fs = ~~(Math.random() * colors.length) + 1; flowers[hm].cs = ~~(Math.random() * colors.length) + 1; flowers[hm].nP = randomIntFromInterval(4, 10); flowers[hm].spacing = randomIntFromInterval(4, 10); } function buildRy(R, k, cx, cy, nP, spacing) { var r = R * k; var A = 360 / nP; var petals = []; for (var i = 0; i < nP; i++) { var ry = []; ry[ry.length] = { x: cx, y: cy } var a1 = i * A + spacing; var x1 = ~~(cx + R * Math.cos(a1 * rad)); var y1 = ~~(cy + R * Math.sin(a1 * rad)); ry[ry.length] = { x: x1, y: y1, a: a1 } var a2 = i * A + A / 2; var x2 = ~~(cx + r * Math.cos(a2 * rad)); var y2 = ~~(cy + r * Math.sin(a2 * rad)); ry[ry.length] = { x: x2, y: y2, a: a2 } var a3 = i * A + A - spacing var x3 = ~~(cx + R * Math.cos(a3 * rad)); var y3 = ~~(cy + R * Math.sin(a3 * rad)); ry[ry.length] = { x: x3, y: y3, a: a3 } ry[ry.length] = { x: cx, y: cy } petals[i] = ry; } return petals } function update() { ctx.clearRect(0, 0, cw, ch); for (var f = 0; f < flowers.length; f++) { if (flowers[f].k < flowers[f].K) { flowers[f].R += flowers[f].Ri; flowers[f].k += flowers[f].ki; } var R = flowers[f].R; var Ri = flowers[f].Ri; var k = flowers[f].k; var ki = flowers[f].ki; var K = flowers[f].K; var cx = flowers[f].cx; var cy = flowers[f].cy; var fs = colors[flowers[f].fs]; var cs = colors[flowers[f].cs]; var nP = flowers[f].nP; var spacing = flowers[f].spacing; for (var petal = 0; petal < petals.length; petal++) {// petals = buildRy(R, k, cx, cy, nP, spacing); ctx.fillStyle = fs; drawCurve(petals[petal]); } drawCenter(k, cx, cy, cs); } requestId = window.requestAnimationFrame(update); } function drawCenter(k, cx, cy, cs) { ctx.beginPath(); ctx.fillStyle = cs; ctx.arc(cx, cy, k * 10, 0, 2 * Math.PI) ctx.fill(); } function drawCurve(p) { var pc = controlPoints(p); ctx.beginPath(); ctx.moveTo(p[0].x, p[0].y); ctx.quadraticCurveTo(pc[1][1].x, pc[1][1].y, p[1].x, p[1].y); if (p.length > 2) { for (var i = 1; i < p.length - 2; i++) { ctx.bezierCurveTo(pc[i][0].x, pc[i][0].y, pc[i + 1][1].x, pc[i + 1][1].y, p[i + 1].x, p[i + 1].y); } var n = p.length - 1; ctx.quadraticCurveTo(pc[n - 1][0].x, pc[n - 1][0].y, p[n].x, p[n].y); } ctx.fill(); } function controlPoints(p) { var pc = []; for (var i = 1; i < p.length - 1; i++) { var dx = p[i - 1].x - p[i + 1].x; var dy = p[i - 1].y - p[i + 1].y; var x1 = p[i].x - dx * t; var y1 = p[i].y - dy * t; var o1 = { x: x1, y: y1 }; var x2 = p[i].x + dx * t; var y2 = p[i].y + dy * t; var o2 = { x: x2, y: y2 }; pc[i] = []; pc[i].push(o1); pc[i].push(o2); } return pc; } function randomIntFromInterval(mn, mx) { return ~~(Math.random() * (mx - mn + 1) + mn); } for (var f = 0; f < flowers.length; f++) { var R = flowers[f].R; var Ri = flowers[f].Ri; var k = flowers[f].k; var ki = flowers[f].ki; var K = flowers[f].K; var cx = flowers[f].cx; var cy = flowers[f].cy; var fs = colors[flowers[f].fs]; var cs = colors[flowers[f].cs]; var nP = flowers[f].nP; var spacing = flowers[f].spacing; var petals = buildRy(R, k, cx, cy, nP, spacing); ctx.fillStyle = colors[flowers[f].fs]; for (var i = 0; i < petals.length; i++) { drawCurve(petals[i]); } } requestId = window.requestAnimationFrame(update); window.setTimeout(function() { if (requestId) { window.cancelAnimationFrame(requestId) }; }, 6000) |
Некоторые настройки:
howMany
- количество цветов
shadowBlur
- размытие тени
shadowOffsetX
- смещение тени по X
shadowOffsetY
- смещение тени по Y
shadowColor
- цвет тени
colors
- цвета цветов
Найдено на codepen.io у пользователя Gabi
Добавить комментарий: