HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网页制作

来源：阅读：1341 次日期：2016-07-13 14:15:37

温馨提示：小编为您整理了“HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)”,方便广大网友查阅！

本文为大家详细介绍下HTML5 Canvas Fill 与Stroke文字效果，基于Canvas如何实现纹理填充与描边、颜色填充与描边，具体代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助

演示HTML5 Canvas Fill 与Stroke文字效果，基于Canvas如何实现纹理填充与描边。

一：颜色填充与描边

颜色填充可以通过fillStyle来实现，描边颜色可以通过strokeStyle来实现。简单示例

如下：

代码如下:

// 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);

二：纹理填充与描边

HTML5 Canvas还支持纹理填充，通过加载一张纹理图像，然后创建画笔模式，创建纹理模式的API为ctx.createPattern(imageTexture,"repeat");第二参数支持四个值，分别为”repeat-x”, ”repeat-y”, ”repeat”,”no-repeat”意思是纹理分别沿着X轴，Y轴，XY方向沿重复或者不重复。纹理描边与填充的代码如下：

代码如下:

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);

纹理图片：

代码：

代码如下:

<!DOCTYPE html>

<html>

<head>

<title>Canvas Fill And Stroke Text Demo</title>

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>

</head>

<body>

<h1>HTML5 Canvas Text Demo - By Gloomy Fish</h1>

<pre>Fill And Stroke</pre>

</div>

</body>

</html>

上一篇：html5 音乐播放器 audio 标签使用概述

下一篇：css 如何让背景图片拉伸填充避免重复显示

手机网站地址：HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！