HTML5 Trazo y relleno de Canvas

Cada vez que se dibuja una forma en HTML5Al dibujar formas en el lienzo, se deben configurar dos propiedades: Trazo (Stroke) y Relleno (Fill)

Propiedades de trazo y relleno

Cada vez que se dibuja una forma en HTML5Al dibujar formas en el lienzo, se deben configurar dos propiedades:

1. Trazo

2. Relleno

El trazo (Stroke) y el relleno (Fill) determinan cómo se dibuja la forma. El trazo es el contorno de la forma. El relleno es el contenido interno de la forma.

Ejemplo en línea

Este es un ejemplo de rectángulo dibujado con trazo azul y relleno verde (en realidad son dos rectángulos):

Este es el código para dibujar estos dos cuadrados:

<canvas id="ex1" ancho="500" altura="150" estilo="borde:　1px sólido #cccccc;">
　　　　HTML5　No se admite Canvas
</canvas>
<script>
//　1.Esperar que la página se cargue completamente.
window.onload = function() {
　　　　drawExamples();
}
function drawExamples(){
　　　　//　2.Obtener la referencia al elemento canvas.
　　　　var canvas = document.getElementById("ex1");
　　　//　3.Obtener el elemento canvas.2Contexto D.上下文。
　　　　var context = canvas.getContext("2d");
　　　　//　4.Dibujar 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>

Resultados de ejecución del ejemplo superior:

Preste atención a cómo usar2El atributo strokeStyle y fillStyle del contexto D se utilizan respectivamente para configurar el estilo de relleno y el estilo de borde.

También presté atención a cómo usar la propiedad lineWidth para configurar el ancho de borde (contorno) del rectángulo azul. Configure lineWidth en5, lo que significa que el ancho de la línea del rectángulo descrito es5.

.2Finalmente, preste atención a cómo especificar