Статья по теме:
Демо JavaScript:
<canvas id="canv" width="500" height="500" ></canvas> <script> let ctx = document.getElementById('canv').getContext('2d'); ctx.beginPath(); ctx.fillStyle = "black"; ctx.fillRect (0, 0, 500, 500); ctx.fill(); ctx.stroke(); // функция строящая квадрат по длине диагонали, углу между диагональю и положительным направлением оси х, центру квадрата function SQR (d, alpha, cx, cy) { // расчет координат вершин квадрата let x1 = cx - d / 2 * Math.cos ((180 - alpha) * Math.PI / 180), y1 = cy - d / 2 * Math.sin ((180 - alpha) * Math.PI / 180), x2 = cx + d / 2 * Math.cos ((alpha - 90) * Math.PI / 180), y2 = cy - d / 2 * Math.sin ((alpha - 90) * Math.PI / 180), x3 = cx + d / 2 * Math.cos ((180 - alpha) * Math.PI / 180), y3 = cy + d / 2 * Math.sin ((180 - alpha) * Math.PI / 180), x4 = cx - d / 2 * Math.cos ((alpha - 90) * Math.PI / 180), y4 = cy + d / 2 * Math.sin ((alpha - 90) * Math.PI / 180); if (alpha == 180) { y2 = cy - d / 2; y4 = cy + d / 2; } if (alpha == 0) { y2 = cy + d / 2; y4 = cy - d / 2; } ctx.beginPath(); ctx.strokeStyle = "red"; ctx.moveTo (x1, y1); ctx.lineTo (x2, y2); ctx.lineTo (x3, y3); ctx.lineTo (x4, y4); ctx.lineTo (x1, y1); ctx.stroke(); } let d = Math.sqrt(2) * 400, alpha = 135, cx = 250, cy = 250, da = 10; // задание начальных параметров: длины лиагонали, угла между диагональю и положительной полуосью х, центра квадрата и угла поворота следующего квадрата относительно предыдущего for (let i = 0; i < 50; i ++) { SQR (d, alpha, cx, cy); // рисуем квадрат alpha -= da; // меняем угол alpha %= 180; d = d * Math.sin (45 * Math.PI / 180) / Math.sin ((135 - da) * Math.PI / 180); // расчитываем длинудиагонали следующего квадрата через длину диагонали предыдущего } SQR (d, alpha, cx, cy); </script>
Прикрепленный файл | Размер |
---|---|
kozenko_sqr_fract.zip | 999 байтов |