HTML5 Canvas filling And Stroke (Fill And Stroke)
Demonstrate HTML5 Canvas Fill and Stroke text effects, based on how to implement Canvas
Current texture filling and stroke.
I. Color filling and stroke
Color filling can be achieved through fillStyle, and stroke color can be achieved through strokeStyle. Simple Example
As follows:
// Fill and stroke text
Ctx. font = '60pt Calibri ';
Ctx. lineWidth = 3;
Ctx. strokeStyle = 'green ';
Ctx. strokeText ('Hello World! ', 20,100 );
Ctx. fillStyle = 'red ';
Ctx. fillText ('Hello World! ', 20,100 );
2. Texture filling and stroke
HTML5 Canvas also supports texture filling. By loading a texture image, you can create a paint brush mode and
The texture mode API is ctx. createPattern (imageTexture, "repeat"). The second parameter supports four
Values, which are "repeat-x", "repeat-y", "repeat", and "no-repeat" respectively indicate that the textures are
The X axis, Y axis, and XY are repeated or not repeated. The code for texture stroke and filling is as follows:
Var woodfill = ctx. createPattern (imageTexture, "repeat ");
Ctx. strokeStyle = woodfill;
Ctx. strokeText ('Hello World! ', 20,200 );
// Fill rectangle
Ctx. fillStyle = woodfill;
Ctx. fillRect (60,240,260,440 );
Texture Image:
Iii. Running Effect
Code:
<!DOCTYPE html>