 |
|
Você está aqui: HTML5 ::: Canvas Element ::: Contexto de Desenho |
Como definir a largura da linha do contexto de desenho do Canvas do HTML 5 usando a propriedade lineWidthQuantidade de visualizações: 603 vezes |
|
A propriedade lineWidth do contexto de desenho do Canvas do HTML5 é usada quando precisamos definir ou obter a largura da linha na qual um desenho vai ser ou foi realizado. Esta propriedade aceita e retorna um valor numérico. Veja um exemplo de seu uso para definir a largura (ou espessura) de uma linha:
<!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");
// vamos definir a largura da linha como 10 pixels
contexto.lineWidth = 10;
contexto.beginPath(); // inicia ou reseta o caminho anterior
contexto.moveTo(20, 20); // move a caneta para x, y
contexto.lineTo(300, 20); // coordenadas x, y
contexto.stroke(); // finaliza o desenho
</script>
</body>
</html>
Ao executar este código você verá uma linha com largura de 10 pixels ser desenhada na horizontal. É possível também usar a propriedade lineWidth para retornar a largura da linha do contexto de desenho. Veja um exemplo no qual nós desenhamos três linhas, cada uma o dobro da espessura da anterior:
<!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");
// vamos definir a largura da linha como 5 pixels
contexto.lineWidth = 5;
contexto.beginPath(); // inicia ou reseta o caminho anterior
contexto.moveTo(20, 20); // move a caneta para x, y
contexto.lineTo(300, 20); // coordenadas x, y
contexto.stroke(); // finaliza o desenho
// vamos dobrar a espessura da linha
contexto.lineWidth = contexto.lineWidth * 2;
contexto.beginPath(); // inicia ou reseta o caminho anterior
contexto.moveTo(20, 50); // move a caneta para x, y
contexto.lineTo(300, 50); // coordenadas x, y
contexto.stroke(); // finaliza o desenho
// vamos dobrar a espessura da linha novamente
contexto.lineWidth = contexto.lineWidth * 2;
contexto.beginPath(); // inicia ou reseta o caminho anterior
contexto.moveTo(20, 80); // move a caneta para x, y
contexto.lineTo(300, 80); // coordenadas x, y
contexto.stroke(); // finaliza o desenho
</script>
</body>
</html>
|
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
