Dsarel Posted February 26, 2014 at 10:10 PM Report #546789 Posted February 26, 2014 at 10:10 PM (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 February 27, 2014 at 03:38 PM by Dsarel
taviroquai Posted February 27, 2014 at 01:05 AM Report #546812 Posted February 27, 2014 at 01:05 AM (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 February 27, 2014 at 01:12 AM by taviroquai
Dsarel Posted February 27, 2014 at 03:40 PM Author Report #546916 Posted February 27, 2014 at 03:40 PM 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. 🙂
saloeric Posted February 27, 2014 at 05:20 PM Report #546944 Posted February 27, 2014 at 05:20 PM eu fiz algo parecido, tente adaptar: cores = new Array("green","blue","black"); mapa.fillStyle = cores[Math.floor(Math.random()*cores.length)];
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now