 |
|
||||
 Planilha Web - Planilhas e Calculadoras online para estudantes e profissionais de Engenharia Civil, Engenharia Elétrica e Engenharia Mecânica. |
|||||
Você está aqui: HTML5 ::: Canvas Element ::: Linhas |
Computação gráfica usando HTML 5 - Como usar o método lineTo() do objeto Canvas do HTML5 para desenhar retasQuantidade de visualizações: 3132 vezes |
|
O método lineTo() do objeto Canvas do HTML5 nos permite desenhar linhas retas entre um ponto x e um ponto y. Para isso, usamos o método moveTo() para mover a caneta (ou pena) de desenho para um coordenada x, y e a partir deste ponto nós especificamos as coordenadas x, y para a outra extremidade da linha. O trecho de código a seguir desenha uma linha saindo das coordenadas x = 20, y = 20 e chegando até x = 300, y = 150. Veja: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- contexto.moveTo(20, 20); // move a caneta para x, y contexto.lineTo(300, 150); // coordenadas x, y E aqui estão os códigos HTML e JavaScript para o exemplo completo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>O objeto Canvas do HTML5</title>
</head>
<body>
<Canvas id="canvas1" width="500" height="350"></Canvas>
<script type="text/javascript">
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas1");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
contexto.beginPath(); // inicia ou reseta o caminho anterior
contexto.moveTo(20, 20); // move a caneta para x, y
contexto.lineTo(300, 150); // coordenadas x, y
contexto.stroke(); // finaliza o desenho
</script>
</body>
</html>
Ao abrir esta página HTML nós teremos o seguinte resultado:  |
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
|
Python - Como gerar permutações de uma string em Python usando o objeto permutations do módulo Itertools |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
