www.webdeveloper.com
Results 1 to 4 of 4

Thread: Complete beginer

Hybrid View

  1. #1
    Join Date
    Oct 2012
    Posts
    16

    Complete beginer

    Hi

    I'm trying to learn HTML5 and Javascript. While going threw a book, I also try to add some additional feature to their tutorials.

    In the code bellow I would like to color each rectangle in a random color in still keep it moving aroung. Can you please help?

    Oh, what do you use for debugging?

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Learning the basics of canvas</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	
    var canvas = $("#myCanvas");
    var context = canvas.get(0).getContext("2d");
    var canvasWidth = canvas.width();
    var canvasHeight = canvas.height();
    
    
    
    //definicija tipk
    var playAnimation = true;
    
    var startButton = $("#startAnimation");
    var stopButton = $("#stopAnimation");
    
    stopButton.click(function() {
    	$(this).hide();
    	startButton.show();
    	playAnimation = false;
    });
    
    
    startButton.hide();
    startButton.click(function() {
    	$(this).hide();
    	stopButton.show();
    	playAnimation = true;
    	animate();
    });
    
    //definicija likov
    
    var Shape = function(x, y, width, height, color) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.color = context.fill;
    };
    
    
    var shapes = new Array();
    for (var i = 0; i < 250; i++) {
    var x = Math.random()*250;
    var y = Math.random()*250;
    var width = height = Math.random()*5;
    var color = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; 
    
    
    
    //"rgb(Math.floor(Math.random()*255), Math.floor(Math.random()*255), Math.floor(Math.random()*255))"; 
    
    //'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
    
    shapes.push(new Shape(x, y, width, height, color));
    };
    
    
    //animacija
    
    function animate() {
    context.clearRect(0, 0, canvasWidth, canvasHeight);
    var shapesLength = shapes.length;
    for (var i = 0; i < shapesLength; i++) {
    var tmpShape = shapes[i];
    tmpShape.x += Math.random()*4-2;
    tmpShape.y += Math.random()*4-2;
    context.fillRect(tmpShape.x, tmpShape.y, tmpShape.width, tmpShape.height, tmpShape.color);
    };
    if (playAnimation) {
    setTimeout(animate, 33);
    };
    };
    animate();
    
    
    });
    
    function rdece()
    { 
    var d=document.getElementById("myCanvas");
    var ctx=d.getContext("2d");
    //shapes.push(new Shape(150, 150, 10, 10));
    ctx.fillStyle= "red";
    //context.fillRect(0,0,150,75);
    };
    
    
    function modro()
    { 
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle= "blue";
    //ctx.fillRect(0,0,150,75);
    
    }
    
    
    </script>
    </head>
    <body>
    <canvas id="myCanvas" width="500" height="281">
    </canvas> 
    <div>
    <button id="startAnimation">Start</button>
    <button id="stopAnimation">Stop</button>
    <button onclick="rdece()">Rdeče</button>
    <button onclick="modro()">Modro</button>
    </div>
    
    <p id="demo"> klikni za spremembo </p>
    </body>
    </html>

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    In the Shape constructor function...

    this.color = context.fill;

    Change it to this:

    this.color = color;

    And in the for loop in the animate function, add this line:

    context.fillStyle = tmpShape.color;

    (You don't specify any color in fillRect.)
    Last edited by ReFreezed; 10-26-2012 at 08:57 PM.

  3. #3
    Join Date
    Oct 2012
    Posts
    16
    great, thank you a lot...

  4. #4
    Join Date
    Sep 2011
    Location
    Bristol, England, United Kingdom
    Posts
    192
    You'll want to familiarise yourself with the JavaScript console for debugging, as this will be where all your error messages and warnings are displayed. In Internet Explorer (version 9), press F12. For Chrome you can press Ctrl + Shift + C, for Firefox you'll need to download Firebug and once installed, press Crtl + Shift + C. For Opera you'll need to to use Ctrl + Shift + I to open Dragonfly.

    For Safari, go to Edit -> Preferences -> Advanced -> "Show develop menu in menu bar". Then go to "Develop" in the menu and start debugging JavaScript.

    My advice would be to simply start Googling your errors as and when they occur to give you a more practical understanding of what's happening.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles