WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
fleur
702
mambetov1237.b
Ouvrir dans l'éditeur
Publiez votre code
Precisa de um site?
Recommandé
15 September 2024
CodePen - dessiner des fleurs avec Greensock
22 October 2024
fleur violette
7 August 2024
Fleurs animées
HTML
Copy
Document
Tree complexity:
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) */