Обводка и заливка Canvas в HTML5

Every time a shape is drawn on an HTML5 canvas, two properties must be set: Stroke (outline) and Fill (fill)

Stroke and Fill properties

Every time a shape is drawn on an HTML5 canvas, two properties must be set:

1. Stroke

2. Fill

Stroke (outline) and Fill (fill) determine how shapes are drawn. Stroke is the outline of the shape. Fill is the content inside the shape.

Online example

This is an example of a rectangle drawn with a blue outline and green fill (which are actually two rectangles):

This is the code to draw these two rectangles:

<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas not supported
</canvas>
<script>
// 1. Wait for the page to fully load.
window.onload = function() {
　　　　drawExamples();
}
function drawExamples(){
　　　　// 2. Get a reference to the canvas element.
　　　　var canvas = document.getElementById("ex1");
　　　// 3. Get the 2D context from the canvas element.
　　　　var context = canvas.getContext("2d");
　　　　// 4. Draw the graphics.
　　　　context.fillStyle = "#009900";
　　　　context.fillRect(10,10, 100,100);
　　　　context.strokeStyle = "#0000ff";
　　　　context.lineWidth = 5;
　　　　context.strokeRect(10,10, 100,100);
}
</script>

Результат выполнения примера выше:

Обратите внимание, как использовать свойства strokeStyle и fillStyle контекста 2D для установки стиля обводки и заливки.

Обратите внимание, как использовать�性 lineWidth для установки ширины обводки синего прямоугольника. Установка lineWidth в 5 означает, что ширина линии прямоугольника составляет 5.

В конце концов, обратите внимание, как определить 2D контекст для рисования заливных и обведенных прямоугольников.