Techious http://www.techious.com/forums/ |
|
Javascript/Canvas http://www.techious.com/forums/viewtopic.php?f=129&t=6180 |
Page 1 of 1 |
Author: | Harry [ Thu Aug 26, 2010 9:04 pm ] |
Post subject: | Javascript/Canvas |
What am I doing wrong? Each square goes to the current colour, rather than the colour of when it was set? Am I going wrong with my array or something? It's here Spoiler for Codes:
|
Author: | azcn2503 [ Thu Aug 26, 2010 11:24 pm ] |
Post subject: | Re: Javascript/Canvas |
I didn't fix it but I did make this which is super similar: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <title>Canvas</title> <script type="text/javascript"><!-- var boxes=0; var boxcols=new Array(); function grab(o){ return document.all?document.all[o]:document.getElementById?document.getElementById(o):""; } function draw(){ var ncv=grab("colourbox").value; boxcols[boxcols.length]=ncv; var canvas=grab("canvas"); var canvas2d=canvas.getContext("2d"); var squareLen=50; var boxPerRow=12; for(var i=0;i<boxcols.length;i+=boxPerRow){ for(var j=0;j<boxPerRow;j++){ var boxnum=i+j; if(boxcols[boxnum]&&boxcols[boxnum]!="undefined"){ canvas2d.fillStyle=boxcols[boxnum]; canvas2d.fillRect(j*50,(i/boxPerRow)*50,squareLen,squareLen); } } } grab("boxcolsText").innerHTML=boxcols; } //--></script> </head> <body onload="draw();"> <input type="text" id="colourbox" value="#000" /> <input type="button" value="Box" onclick="draw();" /> <canvas id="canvas" width="600" height="600" style="border:1px solid #000;"></canvas> <p>Array:</p> <textarea id="boxcolsText" style="width:600px;"></textarea> </body> </html> You can see what's going on in the array |
Author: | azcn2503 [ Thu Aug 26, 2010 11:39 pm ] |
Post subject: | Re: Javascript/Canvas |
Also Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <title>Canvas</title> <script type="text/javascript"><!-- var boxes=0; var boxcols=new Array(); function grab(o){ return document.all?document.all[o]:document.getElementById?document.getElementById(o):""; } function addLogEvent(s){ eventLog+=s+"\n"; } function draw(){ eventLog=""; // global addLogEvent("*** STARTED ARRAY CHANGES"); var ncv=grab("colourbox").value; addLogEvent("Setting ncv as "+ncv); boxcols[boxcols.length]=ncv; addLogEvent("Setting boxcols[boxcols.length] as "+ncv); addLogEvent("*** ENDED ARRAY CHANGES"); var canvas=grab("canvas"); var canvas2d=canvas.getContext("2d"); var squareLen=50; var boxPerRow=12; addLogEvent("*** STARTED DRAWING"); for(var i=0;i<boxcols.length;i+=boxPerRow){ for(var j=0;j<boxPerRow;j++){ var boxnum=i+j; if(boxcols[boxnum]&&boxcols[boxnum]!="undefined"){ addLogEvent("Info: Row "+i+", Cell "+j+", Box Number "+boxnum); canvas2d.fillStyle=boxcols[boxnum]; addLogEvent("Box "+boxnum+" is being filled with "+boxcols[boxnum]); canvas2d.fillRect(j*50,(i/boxPerRow)*50,squareLen,squareLen); addLogEvent("Box drawn to canvas successfully!"); } // else{ addLogEvent("Info: Box Number "+boxnum+" does not exist in boxcols array"); } } } addLogEvent("*** STOPPED DRAWING"); grab("boxcolsText").innerHTML=boxcols; grab("boxcolsLog").innerHTML=eventLog; } //--></script> </head> <body onload="draw();"> <div style="position:absolute;top:0;left:0;"><input type="text" id="colourbox" value="#000" /> <input type="button" value="Box" onclick="draw();" /></div> <canvas id="canvas" width="600" height="600" style="position:absolute;top:50px;left:0;border:1px solid #000;"></canvas> <p>Array:</p> <textarea id="boxcolsText" style="width:400px;height:100px;position:absolute;top:0;right:0;"></textarea> <textarea id="boxcolsLog" style="width:400px;height:600px;position:absolute;top:100px;right:0;"></textarea> </body> </html> |
Author: | Si [ Fri Aug 27, 2010 9:34 am ] |
Post subject: | Re: Javascript/Canvas |
Fix'd (it was the second for loop screwing you up as well as having a few variables for the same thing, replace with an if and fix'd) http://simoncook.org/static/tmp/harry/ |
Page 1 of 1 | All times are UTC |
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group http://www.phpbb.com/ |