[ mls_tod @ 08.04.2012. 20:50 ] @
Draw a binary tree but with an arbitrary depth. User can enter/adjust the depth. All these should be completed in JavaScript. |
[ mls_tod @ 08.04.2012. 20:50 ] @
[ mls_tod @ 20.04.2012. 17:13 ] @
I evo odgovora! Ne mogu da verujem da niko nije ponudio neko resenje!?
<!DOCTYPE html> <html> <head> <title>BinaryTree</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript"> function Tree(x, y, width, height, ctx) { this.draw = function(){ ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (x, y, width, height); ctx.rect(x, y, width, height); }; }; function formSubmit() { n = document.getElementById('first').value; if (n==null || n==""){formReset(); alert("Enter the number in the blank text box");} else drawTree(n); } function formReset() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var rectWidth = 10000; var rectHeight = 4000; ctx.clearRect (0, 0, rectWidth, rectHeight); document.getElementById('first').value = null; } function drawTree(depth) { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var nodeWidth = 30; var nodeHeight = 30; var rectWidth = 10000; var rectHeight = 4000; ctx.clearRect (0, 0, rectWidth, rectHeight); for(i = 0; i <=depth; i++) { for(j = 0; j < Math.pow(2, i); j++) { var canvasWidth = Math.pow(2, depth) * nodeWidth + (Math.pow(2, depth) / 2 - 1) * nodeWidth + Math.pow(2, depth) / 2 * 3 * nodeWidth + nodeWidth; var canvasHeight = depth * 2 * nodeHeight; var nodeSpace = canvasWidth / Math.pow(2, i); var x = nodeSpace / 2 - nodeWidth / 2 + nodeSpace * j; var y = canvasHeight - i * nodeHeight * 1.5; var node = new Tree(x, y, nodeWidth, nodeHeight, ctx); node.draw(); if(i < depth) { ctx.beginPath(); ctx.lineWidth = 5; ctx.moveTo(x + nodeWidth / 2, y); ctx.lineTo(x - nodeSpace / 4 + nodeWidth / 2, y - nodeHeight / 2); ctx.stroke(); ctx.moveTo(x + nodeWidth / 2, y); ctx.lineTo(x + nodeSpace / 4 + nodeWidth / 2, y - nodeHeight / 2); ctx.stroke(); } } } } </script> </head> <body> <form id="frm1" action="form_action.asp"> Enter Depth: <input id="first" type="text" name="fname" /><br /> <input type="button" onclick="formSubmit()" value="Submit form" /> <input type="button" onclick="formReset()" value="Reset" /> </form> <canvas id="myCanvas" width="10000" height="4000"></canvas> </body> </html> [ Milos911 @ 20.04.2012. 18:37 ] @
Pa nisi ponudio nagradu :)
Copyright (C) 2001-2024 by www.elitesecurity.org. All rights reserved.
|