Jump to content

Recommended Posts

Posted (edited)

Boa noite,

Estou a tentar criar um tabuleiro tricolorido em javascript/canvas, tenho um tabuleiro de 400*400px de 8 por 8, com 60 casas. Agora preciso de pintá-lo com 3 cores diferentes, não necessitando de ter um sequência de cores, pode ser completamente aleatório, repetido etc. O código que tenho é o seguinte:

main = function()
	 {		
		 var c=document.getElementById("myCanvas");
		 var ctx=c.getContext("2d");
		 desenha_Tabuleiro(ctx);

	 }
	 function desenha_Tabuleiro(c)
	 {
		 c.beginPath();
		 c.rect(0, 0, 400, 400);
		 c.lineWidth = 1;
		 var colors = new Array ();
		 colors[0]="blue";
		 colors[1]="yellow";
		 colors[2]="red";
		 var i,j,a,b;
		 for(i=0; i<8; i++)
		 {
			 for(j=0; j<8; j++)
			 {
				 col=i*50;
				 r=j*50;

				 c.fillRect(col,r,50,50);
			 }
		 }
		 c.stroke();
		 c.closePath();	
	 }

Pensei em criar um array com 3 cores, mas não estou a ver como vou pintar os quadrados do tabuleiro com as cores definidas no array, alguém me pode ajudar?

Edited by Dsarel
Posted (edited)

Viva,

Tens que usar mesmo canvas? Com a DOM podes criar uma tabela com 8x8 células e 400x400px, criar classes css (cada uma com uma cor de background) e gerar aleatóriamente o nome da classe a atribuir a cada célula...

Por exemplo com jQuery...

jQuery( function($) {
 $('td').each(function (i, item) {
var nomeClass = ''; // gerar o nome da classe css aleatoriamente...
$(item).addClass( nomeClass );
 });
});
Edited by taviroquai
Posted

Viva,

Tens que usar mesmo canvas? Com a DOM podes criar uma tabela com 8x8 células e 400x400px, criar classes css (cada uma com uma cor de background) e gerar aleatóriamente o nome da classe a atribuir a cada célula...

Por exemplo com jQuery...

jQuery( function($) {
 $('td').each(function (i, item) {
var nomeClass = ''; // gerar o nome da classe css aleatoriamente...
$(item).addClass( nomeClass );
 });
});

Não, tenho de usar mesmo para canvas, isto é um exercício de uma prática de uma cadeira, que não consegui completar na aula, que é toda à volta de <canvas> e <svg>.

Pelo que vi, tenho de implementar usando uma regra pré-definida do <canvas> que é a regra 'não-zero', só não sei bem como implementar, tenho de estudar melhor.

Obrigado na mesma pela tua resposta. 🙂

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.