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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
