A tela produzida por canvas terá umas dimensões indicadas com os atributos width e height na etiqueta CANVAS. Portanto, a esquina superior esquerda será o ponto (0,0) e a esquina inferior direita o ponto definido por (width-1,height-1), ou seja, o ponto máximo de coordenadas marcado por sua largura e altura.
Podemos ver o seguinte diagrama para ter uma idéia exata das dimensões e coordenadas em um canvas.
Para desenhar qualquer tipo de forma no canvas necessitaremos posicioná-la com respeito às coordenadas que acabamos de ver. No exemplo do artigo anterior, vimos que para desenhar um retângulo necessitamos vários valores:
contexto.fillRect(10, 10, 100, 70);
Os dois primeiros parâmetros eram as coordenadas x e y da esquina superior esquerda do retângulo. Os dois últimos parâmetros são os valores de largura e altura do mesmo.
Porém, há outras formas que se podem desenhar em um canvas que requerem o uso de métodos um pouco mais elaborados que o desenho de um retângulo, como veremos mais adiante.
Vimos que parte do código Javascript necessário era para realizar as comprovações pertinentes a fim de nos assegurarmos que o navegador é compatível com canvas quando queremos extrair o contexto do canvas antes de começar a desenhar. Neste exemplo, realizaremos uma função para resumir estas tarefas que poderemos utilizar ao longo deste manual.
//Recebe um identificador do elemento canvas e carrega o canvas
//Devolve o contexto do canvas ou FALSE se não pode conseguir
function carregaContextoCanvas(idCanvas){
var elemento = document.getElementById(idCanvas);
if(elemento && elemento.getContext){
var contexto = elemento.getContext('2d');
if(contexto){
return contexto;
}
}
return FALSE;
}
Poderemos invocar esta função e avaliar seu resultado para saber se se obteve ou não o contexto do canvas.
var contexto = carregaContextoCanvas('meucanvas');
if(contexto){
//Tenho o contexto, então desenho sobre o canvas
}
Neste exemplo, vamos desenhar um par de retângulos, um azul e outro amarelo. Já vimos no anterior exemplo como se faziam formas retangulares e também aprendemos a mudar a cor da forma. Para mostrar outra das possibilidades do canvas vamos mostrar como fazer uma cor semi-transparente.
//mudo a cor de desenho a azul
contexto.fillStyle = '#6666ff';
//desenho um retângulo azul
contexto.fillRect(10,10,50,50);
//mudo a cor a amarelo com um pouco de transparência
contexto.fillStyle = 'rgba(255,255,0,0.7)';
//pinto um retângulo amarelo semitransparente
contexto.fillRect(35,35,50,50);
Se observarmos, quando se mudou a cor ao amarelo, se especificou a cor com RGBA, isto significa que estamos indicando também o canal Alpha, que indica o grau de transparência desde 0 (totalmente transparente) a 1 (totalmente opaco).
Esclarecemos de qualquer forma que todas estas funções de desenho serão explicadas detalhadamente mais adiante.
O código completo deste segundo exemplo se pode ver a seguir:
<html>
<head>
<title>Canvas segundo exemplo</title>
<script>
//Recebe um identificador do elemento canvas e carrega o canvas
//Devolve o contexto do canvas ou FALSE se não pode conseguir
function cargaContextoCanvas(idCanvas){
var elemento = document.getElementById(idCanvas);
if(elemento && elemento.getContext){
var contexto = elemento.getContext('2d');
if(contexto){
return contexto;
}
}
return FALSE;
}
window.onload = function(){
//Recebemos o elemento canvas
var contexto = cargaContextoCanvas('meucanvas');
if(contexto){
//Se tenho o contexto
//mudo a cor de desenho a azul
contexto.fillStyle = '#6666ff';
//desenho um retângulo azul
contexto.fillRect(10,10,50,50);
//mudo a cor a amarelo com um pouco de transparência
contexto.fillStyle = 'rgba(255,255,0,0.7)';
//pinto um retângulo amarelo semitransparente
contexto.fillRect(35,35,50,50);
}
}
</script>
</head>
<body>
<canvas id="meucanvas" width="100" height="100">
Seu navegador não suporta canvas.
</canvas>
</body>
</html>
O exemplo pode ser visto em funcionamento em uma página à parte, porém tenha em conta que é preciso dispor de compatibilidade com canvas em seu navegador.
