<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>프랙탈 만들기</title> </head> <body> <canvas id="myCanvas" width="800" height="550" style="border: 2px solid #cef"> </canvas> <script> const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); const startX = canvas.width / 2; const startY = canvas.height; let maxDepth = 18; function drawFractal(x, y, size, angle, depth) { if (depth === 0) { return; } const x1 = x + size * Math.cos(angle); const y1 = y + size * Math.sin(angle); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x1, y1); ctx.strokeStyle = `rgba(0, ${depth * 10}, 0, ${depth / maxDepth})`; ctx.lineWidth = depth / 5; ctx.stroke(); setTimeout(() => { drawFractal(x1, y1, size * 0.8, angle - Math.PI / 6, depth - 1); drawFractal(x1, y1, size * 0.8, angle + Math.PI / 6, depth - 1); }, 1000); } drawFractal(startX, startY, 110, -Math.PI / 2, maxDepth); </script> </body> </html>