WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
flor
1046
mambetov1237.b
Abrir no Editor
Publique Seu Código
Recomendado
18 September 2025
Gerador de texto para flores - Arte de letras animadas
24 November 2024
flor para minha menina
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./stil.css" /> </head> <body> <div id="controls"> <label for="complexity">Tree complexity:</label> <input type="range" id="complexity" min="1" max="12" value="8" /> </div> <canvas id="treeCanvas" width="600" height="500"></canvas> <script src="./script.js"></script> </body> </html><!-- Replace with your HTML Code (Leave empty if not needed) -->
CSS
Copy
body { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background-color: #333; color: #fff; } #controls { margin-bottom: 20px; } input { width: 200px; }<!-- Replace with your HTML Code (Leave empty if not needed) -->
JS
Copy
const canvas = document.getElementById("treeCanvas"); const ctx = canvas.getContext("2d"); const complexitySlider = document.getElementById("complexity"); complexitySlider.addEventListener("input", drawTree); function drawTree() { ctx.clearRect(0, 0, canvas.clientWidth, canvas.height); const complexity = complexitySlider.value; drawBranch(canvas.width / 2, canvas.height, -90, complexity, 100); } function drawBranch(x, y, angle, depth, length) { if (depth === 0) return; const x2 = x + Math.cos((angle * Math.PI) / 180) * length; const y2 = y + Math.sin((angle * Math.PI) / 180) * length; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x2, y2); ctx.strokeStyle = `hsl(${depth * 30}, 100%, 50%)`; ctx.lineWidth = depth * 0.6; ctx.stroke(); drawBranch(x2, y2, angle - 20, depth - 1, length * 0.7); drawBranch(x2, y2, angle + 2, depth - 1, length * 0.7); } drawTree(); /* Replace with your JS Code (Leave empty if not needed) */
