Exemplo1
<!DOCTYPE>
<html>
<head>
<title>HTML5 Canvas</title>
</head>
<body>
<canvas id="meu_canvas" width="300" height="300"></canvas>
<script>
// Canvas e contexto
var canvas = document.getElementById('meu_canvas');
var context = canvas.getContext('2d');
// Iniciar o caminho (apaga desenhos anteriores)
context.beginPath();
// Desenhar uma estrela
context.moveTo(75, 250); // Ponto inicial
context.lineTo(150, 50);
context.lineTo(225, 250);
context.lineTo(50, 120);
context.lineTo(250, 120);
context.lineTo(75, 250); //PONTO FINAL conicide com o inicio
// Configurar a linha
context.lineWidth = 2;
context.strokeStyle = 'red';
// Traçar as linhas do caminho
context.stroke();
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------
Exemplo2
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas</title>
</head>
<body>
<canvas id="meu_canvas" width="300" height="300"></canvas>
<script>
// Canvas e contexto
var canvas = document.getElementById('meu_canvas');
var context = canvas.getContext('2d');
// Iniciar o caminho (apaga desenhos anteriores)
context.beginPath();
// Desenhar um barco a vela
context.moveTo(130,45); // Ponto inicial
context.lineTo(130,170);
context.lineTo(15,170);
context.lineTo(100,220);
context.lineTo(250,220);
context.lineTo(300,170);
context.lineTo(140,170);
context.lineTo(140,130);
context.lineTo(250,130);
context.lineTo(130,45);
// Configurar a linha e cor
context.lineWidth = 2;
context.strokeStyle = 'black';
context.fillStyle = 'red';
// Traçar as linhas do caminho e cor de preenchimento
context.stroke();
context.fill();
</script>
</body>
---------------------------------------------------------------------------------------------------------------
Exemplo3
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas</title>
</head>
<body>
<canvas id="meu_canvas" width="400" height="300"></canvas>
<script>
// Canvas e contexto
var canvas = document.getElementById('meu_canvas');
var context = canvas.getContext('2d');
// Cores e espessura da linha
context.fillStyle = 'gray';
context.strokeStyle = 'black';
context.lineWidth = 2;
// Primeiro arco:
// Novo path
context.beginPath();
// Desenha
context.arc(50, 50, 40, 90*Math.PI/180, 270*Math.PI/180, false);
context.fill();// Preenchimento
context.stroke();// Contorno
// Segundo arco
context.beginPath();
context.arc(150, 50, 40, 90*Math.PI/180, 270*Math.PI/180,true);
context.fill();
context.stroke();
// Circunferência completa
context.beginPath();
context.arc(250, 50, 40, 0, 2*Math.PI);
context.fill();
context.stroke();
// Circunferência parcial
context.beginPath();
context.arc(350, 50, 40, 0, 1*Math.PI);
context.fill();
context.stroke();
</script>
</body>
</html>
Nenhum comentário:
Postar um comentário