How to implement texture fill and stroke (Fill And Stroke) in HTML5 Canvas_html5 tutorial skills

Demonstrates HTML5 Canvas Fill and Stroke text effects, and how to implement texture filling and stroke based on Canvas.

1: Color filling and stroke
Color filling can be achieved through fillStyle, and stroke color can be achieved through strokeStyle. A simple example
is as follows:

Copy code

The code is 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 and then creating a brush pattern, the API to create a texture pattern is ctx.createPattern(imageTexture, "repeat"); the second parameter supports four The values ​​are "repeat-x", "repeat-y", "repeat", and "no-repeat", which means that the texture repeats or does not repeat along the X-axis, Y-axis, and XY direction respectively. The code for texture stroke and fill is as follows:

Copy the code

The code 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:

Three: Run Effect

Code:

Copy code

The code is as follows:

<script> <br>var ctx = null; // global variable 2d context <br>var imageTexture = null; <br>window.onload = function() { <br>var canvas = document.getElementById("text_canvas"); <br>console.log(canvas.parentNode.clientWidth); <br>canvas.width = canvas.parentNode. clientWidth; <br>canvas.height = canvas.parentNode.clientHeight; <br>if (!canvas.getContext) { <br>console.log("Canvas not supported. Please install a HTML5 compatible browser."); <br>return; <br>} <br>// get 2D context of canvas and draw rectangel <br>ctx = canvas.getContext("2d"); <br>ctx.fillStyle="black"; <br>ctx. fillRect(0, 0, canvas.width, canvas.height); <br>// fill and stroke text <br>ctx.font = '60pt Calibri'; <br>ctx.lineWidth = 3; <br>ctx. strokeStyle = 'green'; <br>ctx.strokeText('Hello World!', 20, 100); <br>ctx.fillStyle = 'red'; <br>ctx.fillText('Hello World!', 20, 100); <br>// fill and stroke by pattern <br>imageTexture = document.createElement('img'); <br>imageTexture.src = "../pattern.png"; <br>imageTexture.onload = loaded(); <br>} <br>function loaded() { <br>// delay to image loaded <br>setTimeout(textureFill, 1000/30); <br>} <br>function textureFill() { <br>// var woodfill = ctx.createPattern(imageTexture, "repeat-x"); <br>// var woodfill = ctx.createPattern(imageTexture, "repeat-y"); <br>// var woodfill = ctx .createPattern(imageTexture, "no-repeat"); <br>var woodfill = ctx.createPattern(imageTexture, "repeat"); <br>ctx.strokeStyle = woodfill; <br>ctx.strokeText('Hello World!' , 20, 200); <br>// fill rectangle <br>ctx.fillStyle = woodfill; <br>ctx.fillRect(60, 240, 260, 440); <br>} <br></script>

HTML5 Canvas Text Demo - By Gloomy Fish

Fill And Stroke

< /html>