Raio de luz

Um raio de luz parte do canto inferior esquerdo do ecrã, com um ângulo de 45º. Quando colide com o círculo, o círculo muda de cor. Assim que o raio atinge o limite do canvas, o processo é reiniciado.

O período de atualização do canvas é de 20ms. A função eval é usada para transformar a largura e altura do canvas em valores numéricos, caso contrário o programa vê-as como texto e as adições sobre a variável y são concatenações de texto.

Visualização:

<!DOCTYPE html>
<html>
<head>
<title>Gráfico</title>
<meta charset="iso-8859-1">
<script type="text/javascript">

var xc = 350;	// centro do círculo
var yc = 150;
var r = 80;	// raio do círculo
var ang = 45;	// ângulo do raio de luz em graus

// Incrementos para o raio de luz
var incx = Math.cos(ang*Math.PI/180);
var incy = -Math.sin(ang*Math.PI/180);

var x, y;	// coordenadas do ponto cintilante

var ctx;

var larg, alt;

function init() {
	var c = document.getElementById("cvs");
	ctx = c.getContext("2d");
	ctx.lineWidth = 3;
	larg = eval( c.getAttribute("width") );
	alt = eval( c.getAttribute("height") );
	x = 0;
	y = alt;
	var periodoRelogio = 20;
	setInterval("anima()", periodoRelogio);
}

function anima() {
	// Desenhar
	ctx.fillStyle = "black";
	ctx.beginPath();
	ctx.rect(0,0,larg,alt);
	ctx.fill();

	// Se a distância de (x,y) a (xc,yc) for inferior a r, então
	// muda de cor

	var d = Math.sqrt(Math.pow(x-xc,2)+Math.pow(y-yc,2));
	if(d<r)
		ctx.fillStyle = "#FF8040";
	else
		ctx.fillStyle = "#FF0000";

	ctx.beginPath();
	ctx.arc(xc,yc,r,0,2*Math.PI);
	ctx.fill();
	

	x += incx;
	y += incy;

	//ctx.fillStyle = "#FFFF20";
	//ctx.beginPath();
	//ctx.arc(x,y,5,0,2*Math.PI);
	//ctx.fill();
	poeLinha(0,alt,x,y,"#FFFF20");

	// Quando sai do canvas, volta ao início
	if(y<0 || x>larg) {
		x = 0;
		y = alt;
	}

}


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

</script>


</head>
<body onload="init();">
<canvas width="600" height="400" id="cvs"></canvas>
</body>
</html>

Deixe um comentário Cancelar resposta