Aqui no Explicação da Net venho escrevendo matérias sobre
No post HTML5 – Desenhando retângulos com canvas você aprendeu a criar retângulos e quadrados e hoje utilizaremos o chamado Paths, que irá possibilitar a criação de linhas fazendo outras formas geométricas e neste caso um triângulo e no próximo post explicarei a desenhar arcos e círculos em sua área canvas.
Para criar formas usando Paths precisamos adicionar outros métodos:
Bom chamamos o método beginPath() para abrir a sessão .
Método beginPath()
Esse método tem a função de dizer que vamos começar a desenhar um caminho(path), não possui nenhum parâmetro.
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
context.beginPath();
}
}
</script>
Agora vamos começar a desenhar utilizando métodos
- moveTo
- Lines
- Arcs (em prevê)
moveTo
Este método não desenha nada em sua tela
ctx.moveTo (x,y);
Lines
O método lineto desenha linhas, esse método funciona como fosse um lápis que desenha uma linha reta até o ponto onde se definiu ao invocar o método.
Sua sintaxe leva coordenadas X e Y, podemos mover o ponto atual com um método moveTo (), o ponto final do caminho anterior é o ponto de partida para o próximo .
ctx.lineTo (x,y);
Veja o Exemplo de triângulo com canvas e o código logo abaixo para você entender melhor, não esqueça de ler os comentários do código que é uma explicação resumida.
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// Exemplo de triângulo com cor sólida
ctx.beginPath();
ctx.moveTo(0,0);// O ponto de partida do desenho são as coordenadas 0,0
ctx.lineTo(0,150);// A 1ª linha do desenho vai da coordenada 0 até 150 de largura
ctx.lineTo(150,0);// A 2ª linha começa onde termina a 1ª, ou seja vai da coordenada 150 de largura para 0
ctx.lineTo(0,0);// A 3ª linha começa onde acaba a 2ª, se não houver mais linhas em seu desenho ela automaticamente se encontra com a 1ª linha
ctx.stroke();
}
}
</script>
stroke(), fill() e closePath()
O método stroke servi para deixar sua forma sem preenchimento enquanto o método fill é usado para deixar sua forma com preenchimento de cor sólida suas sintaxes não tem parâmetros
ctx.stroke();
ctx.fill();
O método closePath uni o último ponto do desenho até o primeiro assim fechando a forma, mas caso sua forma ja tenha sido fechada ou há apenas um ponto no desenho este método não faz nada, sua sintaxe não possuí parâmetros.
ctx.closePath ();
Sintaxe de um modelo de código-fonte
Criei um modelinho onde segui a ordem e o que servi cada método só para facilitar um pouco.
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
context.beginPath();// marca o inicio do desenho
ctx.moveTo (x,y);// mostra o ponto inicial do desenho
ctx.lineTo (x,y);// desenha linha retas
ctx.closePath ();// marca o final do desenho
// Ou você usa o método stroke ou fill, nunca os dois
ctx.stroke();//deixa o desenho sem preenchimento
ctx.fill(); // deixa o desenho com preenchimento de cor sólida
}
}
</script>
<body>
<canvas id="canvas" width="150" height="150">
Este texto se mostra para os navegadores não compatíveis com canvas.
Por favor, utiliza Firefox, Chrome, Safari ou Opera.
</canvas> </body>
<pre>
Muito bom os tutorias de canvas,
espero ver toda a continuação.
valeo por compartilhar