Desenhando Linhas com régua

Ontem Comecei a ver como desenhar linhas em HTML5. Ele funciona muito semelhante a utilização de canvas em outras plataformas. Me lembrei muito dos desenhos em que fazia em Delphi no início dos anos 2000.

Segue um exemplo que fiz:

var Point = function (x, y) {
return { x: x, y: y };
};

var drawPolygon = function (points) {
if (points.length < 1)
return;

ctx.beginPath();

ctx.moveTo(points[0].x, points[0].y);
for (var idx = 1; idx < points.length; idx++) {
ctx.lineTo(points[idx].x, points[idx].y);
}
ctx.lineTo(points[0].x, points[0].y);
ctx.stroke();
};
var points = [Point(10, 10), Point(110, 10), Point(110, 110), Point(10, 110)];

drawPolygon(points);

A minha alegria quando isso fez aparecer um quadrado na tela😀

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s