Programar no Canvas

O HTML5 introduziu um novo objeto – o canvas – onde é possível programar em javascript, como uma tela, da mesma forma que se programa sobre painéis em Java.

Há uma série de funções predefinidas para desenhar círculos, retângulos, linhas e escrever textos, com a cor, espessura e fonte que quisermos.

No exemplo abaixo, criamos um canvas com 600px de largura e 400px de altura, e desenhamos dois retângulos, uma circunferência e um círculo, assim como 6 linhas que unem estes 4 objetos.

Visualização:

Código HTML

<!DOCTYPE html>
<html>
<head>
<title>Canvas e Javascript</title>
<meta charset="iso-8859-1">
<script type="text/javascript" src="codigo.js"></script>
</head>
<body onload="inicia();">
<h3>Canvas e Javascript</h3>
<canvas width="640" height="480" id="tela"></canvas>
</body>
</html>

Código javascript


function inicia() {
	var canvas = document.getElementById("tela");
	var larg = canvas.getAttribute("width");
	var alt = canvas.getAttribute("height");

	// Aceder ao contexto gráfico do canvas
	var ctx = canvas.getContext("2d");

	// Retângulo do fundo
	ctx.fillStyle = "#60FFFF";
	ctx.beginPath();
	ctx.rect(0,0,larg,alt);
	ctx.fill();

	// Retângulo cima, esquerda
	ctx.fillStyle = "red";
	ctx.beginPath();
	ctx.rect(80,70,70,50);
	ctx.fill();

	// Retângulo cima, direita
	ctx.fillStyle = "blue";
	ctx.beginPath();
	ctx.rect(450,70,70,50);
	ctx.fill();

	// Círculo baixo esquerda (circunferência)
	ctx.lineWidth = 5;
	ctx.strokeStyle = "#008000";
	ctx.beginPath();
	ctx.arc(115,305,35,0,2*Math.PI);
	ctx.stroke();

	// Círculo baixo direita
	ctx.lineWidth = 5;
	ctx.fillStyle = "#FFFF20";
	ctx.beginPath();
	ctx.arc(485,305,35,0,2*Math.PI);
	ctx.fill();

	// Linha entre os retângulos
	poeLinha(ctx,115,95,485,95,"black");
	poeLinha(ctx,115,305,485,305,"white");
	poeLinha(ctx,115,95,115,305,"khaki");
	poeLinha(ctx,485,95,485,305,"purple");
	poeLinha(ctx,115,95,485,305,"magenta");
	poeLinha(ctx,115,305,485,95,"#123456");
}

function poeLinha(ctx,x1,y1,x2,y2,cor) {
	ctx.strokeStyle = cor;
	ctx.beginPath();
	ctx.moveTo(x1,y1);
	ctx.lineTo(x2,y2);
	ctx.stroke();
}

A função ctx.arc permite desenhar um arco com a amplitude (em radianos) pretendida. Para desenhar um círculo, precisamos de desenhar de 0 a 2*PI (dois últimos parâmetros). Os dois primeiros parâmetros são as coordenadas do centro, e o terceiro parâmetro é o raio.

ctx.arc(485,305,35,0,2*Math.PI);

Os parâmetros da função ctx.rect são mais intuitivos: abcissa e ordenada do canto superior esquerdo, largura e altura do retângulo.

ctx.rect(450,70,70,50);

As funções do tipo stroke desenham apenas a linha, enquanto que as funções do tipo fill preenchem a figura.

Resultado final:

Deixe um comentário Cancelar resposta