Complete beginer

**jumbee** · 10-26-2012 08:20 AM

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>

**ReFreezed** · 10-26-2012 08:53 PM

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.)

**jumbee** · 10-28-2012 11:32 AM

great, thank you a lot...

**George88** · 10-28-2012 04:44 PM

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: Complete beginer

Thread Tools

Display

Complete beginer

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions