Desenho com canvas

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas API</title>
</head>
<body>

<canvas id="x" width="300" height="300"></canvas>
<button onclick="desenhar()">desenhar</button>

<script>
function desenhar(){
// Obtemos o contexto
context=document.getElementById('x').getContext('2d')

//Iniciamos um novo desenho
//Existe um contexto 3D?
//Ainda não. Existem várias implementações de contexto 3D, e cada fabricante de navegador tem criado a sua, mas ainda não há um padrão do W3C sobre esse assunto.
context.beginPath()

//Movemos a caneta para o inicio do desenho
context.moveTo(150,50)

//Desenhamos as linhas
context.lineTo(220,250)
context.lineTo(50,125)
context.lineTo(250,125)
context.lineTo(80,250)
context.lineTo(150,50)

//O desenho não é de verdade enquanto você
//não mandar o contexto pintá-lo.

//Vamos pintar o interior de amarelo
context.fillStyle='#ff0'
context.fill()

//Vamos pintar as linhas de vermelho.
context.strokeStyle='#f00'
context.stroke()

}
</script>

</body>
</html>

Comentários

Postagens mais visitadas deste blog

Instalação NetBeans

Calcular frete pelos correios via PHP