WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
फूल
724
mambetov1237.b
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
24 November 2024
मेरी लड़की के लिए फूल
22 October 2024
बैंगनी फूल
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) */
