 |
|
Você está aqui: HTML5 ::: Canvas Element ::: Contexto de Desenho |
Como definir a cor da caneta do contexto de desenho do Canvas do HTML 5 usando a propriedade strokeStyleQuantidade de visualizações: 647 vezes |
|
Em algumas situações nós precisamos mudar a cor da caneta do contexto de desenho do elemento Canvas do HTML 5. Para isso nós podemos usar a propriedade strokeStyle e fornecer a cor desejada. A cor pode ser fornecida por seu nome em inglês ou pelo código hexadecimal (RGB). Veja um exemplo HTML 5 no qual desenhamos uma linha verde no Canvas:
<!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;
// vamos definir a cor da caneta de desenho
contexto.strokeStyle = "green";
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
window.alert("A cor da caneta de desenho é: " +
contexto.strokeStyle);
</script>
</body>
</html>
Ao executar este exemplo você verá uma linha com espessura de 5 pixels e pintada na cor verde. Note como usei uma mensagem window.alert() para exibir o código hexadecimal da cor definida para a linha. |
 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 |
