It is currently Thu Mar 28, 2024 10:15 am

All times are UTC




Post new topic Reply to topic  [ 4 posts ] 
Author Message
 Post Post subject: Javascript/Canvas
 
Offline
Unstoppable
Unstoppable
Years of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membership

Joined: Sun Nov 15, 2009 8:40 pm
Posts: 1038
Karma: 10
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:
Code:
<html>
<head>
<script type="text/javascript" src="jscolor/jscolor.js"></script>
  <script type="application/javascript">

       var num_squares = 0;
       function increaseBoxNumber()
       {
      num_squares++;
       }
   function draw() {
      var canvas = document.getElementById("canvas");
      var draw = canvas.getContext("2d");      
      var squareLength = 50;
      
      var sWidth = document.body.offsetWidth;
      var sHeight = document.body.offsetHeight;
      
      var row = 0;
      var column = 0;
      var box_per_row = 6;
      
      var i = 0; // loop colour picker
      
      var induvidualBoxColours= new Array();  // Array for holding each of the box's colours
      var whatBoxAmI = 0; // What is the current box?
      var numberOfBoxes = (column*box_per_row) + row; // total number of boxes
      
      for (loop=0;loop<=num_squares-1;loop++)
      {
         
         var newColourValue;
         for (whatBoxAmI=0;whatBoxAmI<=numberOfBoxes;whatBoxAmI++)
         {
            
            newColourValue = document.getElementById('colourBox').value; // Gets the value of the colour picker
            induvidualBoxColours[i] = newColourValue;   // Sets the array (and the next box's colour) to the previous lines var
            
            draw.fillStyle = "#" + induvidualBoxColours[whatBoxAmI]; // The colour for each box is the array and the current box nuber
            draw.fillRect (row*55, column*55, squareLength, squareLength); // x y h w
            
            draw.strokeStyle = '#000000'; // black border colour
            draw.lineWidth = 2; // border width
            draw.strokeRect(row*55,column*55,squareLength,squareLength); // Draw the border
            i++;
         }
         
         /*
            Text to put on each box, after the induvidual colours work
         
         draw.fillStyle = "#000000";
         draw.font = " 12px sans-serif";
         draw.fillText(colourValue, 5, 43);  ;
         */
         
         // This if statement makes it go boxes per row
         if (row >= box_per_row-1)
         {
            column++;
            row = 0;
         }
         else
         {
         row++;
         }
      }
         
   }
  </script>
</head>
<body onload="draw()">
   
   <input id="colourBox" class="color" value="#006FFF">
   <FORM>
      <INPUT type="button" value="Create a box" name="boxMaker" onClick="increaseBoxNumber();draw();">

   </FORM>
   <br>
   <canvas id="canvas" width="600" height="600"></canvas>     
   
</body>
</html>

_________________
Skillers wrote:
Oh gawd no! Not the crazy frog! Arghhhhhh! $&^%&*^%*&#$^ %$(%^((% %$(O*%(#*%^ %)*#$&%)*@#% %_(#&%*%) frog


Thu Aug 26, 2010 9:04 pm 
 Profile E-mail  
 
 Post Post subject: Re: Javascript/Canvas
 
Offline
Godlike Poster
Godlike Poster
Years of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membership
User avatar

Joined: Sun Oct 16, 2005 9:42 am
Posts: 8798
Karma: 17

Location: Imagine in your mind a posh country club
Steam Login Name: azcn2503
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 :)

_________________
Follow your heart and live the dream <3


Thu Aug 26, 2010 11:24 pm 
 Profile E-mail  
 
 Post Post subject: Re: Javascript/Canvas
 
Offline
Godlike Poster
Godlike Poster
Years of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membership
User avatar

Joined: Sun Oct 16, 2005 9:42 am
Posts: 8798
Karma: 17

Location: Imagine in your mind a posh country club
Steam Login Name: azcn2503
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>

_________________
Follow your heart and live the dream <3


Thu Aug 26, 2010 11:39 pm 
 Profile E-mail  
 
 Post Post subject: Re: Javascript/Canvas
 
Offline
Top Gun (Admin)
Top Gun (Admin)
Years of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membership
User avatar

Joined: Mon Sep 12, 2005 1:37 pm
Posts: 5855
Karma: 38

Location: Looking for the droid you're looking for.
Steam Login Name: simonpcook
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/

_________________



Fri Aug 27, 2010 9:34 am 
 Profile E-mail  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 4 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Karma functions powered by Karma MOD © 2007, 2009 m157y