HTML5 Tracejamento e preenchimento do Canvas

Cada vez que no HTML5Ao desenhar formas no canvas, são necessários configurar duas propriedades: Stroke (tracejamento) e Fill (preenchimento)

propriedades de tracejamento e preenchimento

Cada vez que no HTML5Ao desenhar formas no canvas, são necessários configurar duas propriedades:

1. Stroke

2. Fill

Stroke (tracejamento) e Fill (preenchimento) determinam como a forma será desenhada. Stroke é a contorno da forma. Fill é o conteúdo interno da forma.

Exemplo online

Este é um exemplo de retângulo desenhado com traço azul e preenchimento verde (na verdade são dois retângulos):

Este é o código para desenhar esses dois retângulos:

<canvas id="ex1" width="500" height="150" style="border:　1px sólido #cccccc;">
　　　　HTML5　Canvas não suportado
</canvas>
<script>
//　1.Aguardar que a página seja completamente carregada.
window.onload = function() {
　　　　drawExamples();
}
function drawExamples(){
　　　　//　2.Obter referência ao elemento canvas.
　　　　var canvas = document.getElementById("ex1");
　　　//　3.Obter referência ao elemento canvas.2D contexto.
　　　　var context = canvas.getContext("2d");
　　　　//　4.Desenhar gráficos.
　　　　context.fillStyle　=　"#00"9900";
　　　　context.fillRect(10,10,　100,100);
　　　　context.strokeStyle　=　"#0000ff";
　　　　context.lineWidth　=　5;
　　　　context.strokeRect(10,10,　100,100);
}
</script>

O resultado da execução do exemplo acima:

Atenção para como usar2O contexto.strokeStyle e a propriedade fillStyle do contexto definem respectivamente o estilo de traçado e o estilo de preenchimento.

Também note como usar a propriedade lineWidth para definir a largura da borda do retângulo azul (contorno). O lineWidth é definido como5, isso significa que a largura da linha do retângulo descrito é5.

.2Por fim, note como especificar