Пирамида на SVG
Требования к знанию языков программирования минимальны, никаких библиотек.
Для прорисовки треугольника достаточно знать 1 оператор SVG:
<polygon points=’0,0 10,20 10,20′ fill=’blue’/>
Для прорисовки пирамиды нужно включить мозги и вспомнить изометрию.
Для 1 курса то, что надо.
Таких фигур можно придумать много и проверять легко.
Посмотреть на вращающуюся пирамиду
Html код страницы
<html> <head> <title>pyramid</title> <script> window.onload = _ => { let pi_3 = [0, -1*Math.PI/3, -2*Math.PI/3, -Math.PI, -4*Math.PI/3, -5*Math.PI/3, 0]; let _grad = Math.PI/180; let [_h, _r, _u, _cx, _cy] = [0, 0, 0.0, 125, 100]; let svg = document.getElementById('pyramid1'); let pyramid1 = Array.from(svg.children); // HTMLCollection to Array svg = document.getElementById('pyramid2'); let pyramid2 = Array.from(svg.children); // HTMLCollection to Array setInterval( _ => { // start of rotation let [x1, y1, ug] = [ [], [], _u*_grad]; pi_3.forEach( (u, i) => { let [x,y] = [Math.cos(u+ug), Math.sin(u+ug)]; [x1[i], y1[i]] = [0.87*(x-y), 0.25*(-x-y)]; }); // *** *** *** let [r, h, cx, cy] = [50, 100, 125, 100]; pyramid1.forEach( (it, i) => { let xy = [cx+r*x1[i], cy+r*y1[i], cx, cy-h, cx+r*x1[i+1], cy+r*y1[i+1]]; it.setAttribute("points", `${xy[0]},${xy[1]} ${xy[2]},${xy[3]} ${xy[4]},${xy[5]}`); }); // *** *** *** let ls = []; let ir = 4 + Math.floor((_u+25.)/60.); let ib = 4 + Math.floor(_u/60.); if ( ir >= 6 ) ir -= 6; if ( ib >= 6 ) ib -= 6; for (let i = 0; i < 6; i++) { ls[i+6] = [_cx+_r*x1[i], _cy+_r*y1[i], _cx, _cy-_h, _cx+_r*x1[i+1], _cy+_r*y1[i+1], 'rgba(176, 0, 0, 0.7)', '#faa']; ls[i] = [_cx+_r*x1[i], _cy+_r*y1[i], _cx, _cy+_h, _cx+_r*x1[i+1], _cy+_r*y1[i+1], 'rgba(176, 229, 229, 0.7)', '#fff']; } pyramid2.forEach( (it,j) => { let i = j; if ( j < 6 ) { i += ib; if ( i >= 6 ) i -= 6; } else { i += ir; if ( i >= 12 ) i -= 6; } it.setAttribute("points", `${ls[i][0]},${ls[i][1]} ${ls[i][2]},${ls[i][3]} ${ls[i][4]},${ls[i][5]}`); it.setAttribute("fill", ls[i][6]); it.setAttribute("stroke", ls[i][7]); }); _h < 100 && _h++; _r < 60 && _r++; // *** *** *** _u += 0.5; if (_u >= 360) _u = 0.0; }, 50); } </script> </head> <body> <h3 style="width: 240px; margin: auto">Простая пирамида.<br>Не понятно, куда крутится. <svg id="pyramid1" width="200" height="150"> <polygon stroke-width="1" stroke="#555" fill="rgba(0, 0, 0, 0.1)"/> <polygon stroke-width="1" stroke="#555" fill="rgba(0, 0, 0, 0.1)"/> <polygon stroke-width="1" stroke="#555" fill="rgba(0, 0, 0, 0.1)"/> <polygon stroke-width="1" stroke="#555" fill="rgba(0, 0, 0, 0.1)"/> <polygon stroke-width="1" stroke="#555" fill="rgba(0, 0, 0, 0.1)"/> <polygon stroke-width="1" stroke="#555" fill="rgba(0, 0, 0, 0.1)"/> </svg> Пример посложнее <svg id="pyramid2" width="200" height="200"> <polygon stroke-width="1"/><polygon stroke-width="1"/> <polygon stroke-width="1"/><polygon stroke-width="1"/> <polygon stroke-width="1"/><polygon stroke-width="1"/> <polygon stroke-width="1"/><polygon stroke-width="1"/> <polygon stroke-width="1"/><polygon stroke-width="1"/> <polygon stroke-width="1"/><polygon stroke-width="1"/> </svg> </h3> </body> </html>
У меня все, удачи.
ссылка на оригинал статьи https://habr.com/ru/post/497044/
Добавить комментарий