Home >Web Front-end >H5 Tutorial >Sample code for HTML5 Canvas fill and stroke implementation

Sample code for HTML5 Canvas fill and stroke implementation

黄舟Original: 2017-03-03 16:08:392973browse

HTML5 Canvas Fill And Stroke

Demonstrate HTML5 Canvas Fill and Stroke text effects, how to implement it based on Canvas

Now texture fill and stroke.

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:

// fill and stroke text
ctx.font = &#39;60pt Calibri&#39;;
ctx.lineWidth = 3;
ctx.strokeStyle = &#39;green&#39;;
ctx.strokeText(&#39;Hello World!&#39;, 20, 100);
ctx.fillStyle = &#39;red&#39;;
ctx.fillText(&#39;Hello World!&#39;, 20, 100);

2: Texture fill 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

values, respectively ”repeat-x”, ”repeat-y”, ”repeat”,”no-repeat”means that the textures are along

X axis, Y axis, XY direction repeat or not repeat. The code for texture stroke and fill is as follows:

var woodfill = ctx.createPattern(imageTexture,"repeat");
ctx.strokeStyle = woodfill;
ctx.strokeText(&#39;Hello World!&#39;, 20, 200);
// fill rectangle
ctx.fillStyle = woodfill;
ctx.fillRect(60, 240, 260, 440);

##Texture picture:

Three: Running effect

# #Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Canvas Fill And Stroke Text Demo</title>
<link href="default.css" rel="stylesheet" />
	<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 = &#39;60pt Calibri&#39;;
			ctx.lineWidth = 3;
			ctx.strokeStyle = &#39;green&#39;;
			ctx.strokeText(&#39;Hello World!&#39;, 20, 100);
			ctx.fillStyle = &#39;red&#39;;
			ctx.fillText(&#39;Hello World!&#39;, 20, 100);
			
			// fill and stroke by pattern
			imageTexture = document.createElement(&#39;img&#39;);
			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(&#39;Hello World!&#39;, 20, 200);
			
			// fill rectangle
			ctx.fillStyle = woodfill;
			ctx.fillRect(60, 240, 260, 440);
		}
		
	</script>
</head>
<body>
	<h1>HTML5 Canvas Text Demo - By Gloomy Fish</h1>
	<pre class="brush:php;toolbar:false">Fill And Stroke

The above is the content of the example code implemented by HTML5 Canvas fill and stroke (Fill And Stroke). For more related information, please Follow the PHP Chinese website (www.php.cn)!

Statement：

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

Previous article：HTML5 Canvas shadow usage demonstration and code detailsNext article：HTML5 Canvas shadow usage demonstration and code details

See more

Sample code for HTML5 Canvas fill and stroke implementation

Related articles