Home

Web Front-end

H5 Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:49 PM

canvas html5 Stroke

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:

Canvas Fill And Stroke Text Demo

<script> var ctx = null; // global variable 2d context var imageTexture = null; window.onload = function() { var canvas = document.getElementById("text_canvas"); console.log(canvas.parentNode.clientWidth); canvas.width = canvas.parentNode. clientWidth; canvas.height = canvas.parentNode.clientHeight; if (!canvas.getContext) { console.log("Canvas not supported. Please install a HTML5 compatible browser."); return; } // get 2D context of canvas and draw rectangel ctx = canvas.getContext("2d"); ctx.fillStyle="black"; ctx. fillRect(0, 0, canvas.width, canvas.height); // 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); // fill and stroke by pattern imageTexture = document.createElement('img'); imageTexture.src = "../pattern.png"; imageTexture.onload = loaded(); } function loaded() { // delay to image loaded setTimeout(textureFill, 1000/30); } function textureFill() { // var woodfill = ctx.createPattern(imageTexture, "repeat-x"); // var woodfill = ctx.createPattern(imageTexture, "repeat-y"); // var woodfill = ctx .createPattern(imageTexture, "no-repeat"); 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); } </script>

HTML5 Canvas Text Demo - By Gloomy Fish

Fill And Stroke

< /html>

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn