Duvida de Canvas

Livros
1

Tenho um canvas dividido em duas partes, e a função abaixo:
function clicouNoCanvas(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;

if( x < 300)	{
	if( y < 400) {
		var cor = "yellow";
		corEscolhida.push(cor);

c.fillStyle =corEscolhida ;
c.beginPath();
c.arc(x, y, 10, 0, 2*3.14);
c.fill();
} }
console.log("posicao do clique : " + x + " , " + y);
Como faço para na outra metade da tela (x entre 300 e 600p.ex) o clique do mouse printar bolas vermelhas?

2

acho que voce pode fazer desse jeito:
if(x >= 300 && x <= 600) {
// aqui a instrução para printar bolas vermelhas
}

3

Obrigado pelo contato, mas você pode indicar em que lugar da função eu coloco este 2o condicional?
Por que se eu colocar os dois condicionais antes de escolher a cor, ele entende somente a primeira cor, e não divide a tela do canvas em dois.
Segue abaixo o código:

4

Função:
function clicouNoCanvas(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if ( x < 300) {
corEscolhida.push(“yellow”);
}
if(x >= 300 && x <= 600) {
corEscolhida.push(“red”);
}
c.fillStyle =corEscolhida ;
c.beginPath();
c.arc(x, y, 10, 0, 2*3.14);
c.fill();
console.log("posicao do clique : " + x + " , " + y);

}

5

Tenta o seguinte:
if(x < 300) {
// Instrução aqui
} elseif(x >= 300 && <=600) {
// Instrução aqui
}

6

Red-mind,
Não rodou também.

7

A função que voce apresentou esta associado a algum evento do tipo clique? porque em condições normais esse trecho de código deveria funcionar, pois ele significa: se x < 300 for uma condição verdadeira printar amarelo, se for falso a função já nao deve printar amarelo. caso seja >= 300 && <= 600 deve printar vermelho, ate que essa condição seja falsa.

8

Peco ver todo o seu código nesse arquivo…

9

Sim, segue abaixo:

10
var tela = document.getElementById("tela"); var c = tela.getContext("2d"); c.fillStyle="gray"; c.fillRect(0, 0, 600, 400); c.strokeStyle="black"; c.strokeRect(0, 0, 600, 400);
11

var corEscolhida = [];

function clicouNoCanvas(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if ( x < 300) {
corEscolhida.push(“yellow”);
}
else {
corEscolhida.push(“red”);
}
c.fillStyle =corEscolhida ;
c.beginPath();
c.arc(x, y, 10, 0, 2*3.14);
c.fill();
console.log("posicao do clique : " + x + " , " + y);

}

tela.onclick = clicouNoCanvas;
12

Certo, já tentou clicar na tela mais de 300 vezes? Porque em condições normais o seu código já deveria funciona com o trecho de código que sugerir, fiz um teste usando php para algo semelhante e rodou correctamente…

13

vou tentar.
Obrigado de toda forma.