コメント：この記事では、HTML5キャンバスの塗りつぶしとストロークのテキスト効果を詳細に紹介します。キャンバス、テクスチャの詰め物とストローク、色の詰め物とストロークを実現する方法に基づいて、特定のコードは次のとおりです。興味のある友達はそれを参照できます。私はそれが誰にでも役立つことを願っています。
Canvasがテクスチャの詰め物とストロークを実装する方法に基づいて、HTML5キャンバスの塗りつぶしとストロークのテキスト効果を示します。1：色の塗りつぶしとストローク
色の詰め物は充填剤を通して実現でき、ストロークの色はストロークスタイルを通して達成できます。簡単な例
次のように：
//テキストに記入してストロークします
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：テクスチャの詰め物とストローク
HTML5キャンバスは、テクスチャの詰め物もサポートしています。テクスチャイメージをロードしてブラシパターンを作成することにより、テクスチャパターンを作成するためのAPIはctx.createpattern（imageTexture、Repeat）です。 2番目のパラメーターは、リピートX、リピート、リピート、ノーリピートの4つの値をサポートします。つまり、テクスチャはX軸、Y軸、XY方向に沿って繰り返されるか、繰り返されません。テクスチャストロークとフィルのコードは次のとおりです。
var woodfill = ctx.createpattern（imageTexture、 "Repeat"）;
ctx.strokestyle = woodfill;
ctx.StrokeText（ 'Hello World！'、20、200）;
//長方形を埋めます
ctx.fillstyle = woodfill;
ctx.fillrect（60、240、260、440）;
テクスチャ画像：
3：操作効果
コード：
<！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" />
<スクリプト>
var ctx = null; //グローバル変数2Dコンテキスト
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（ "サポートされていないキャンバス。HTML5互換ブラウザをインストールしてください。"）;
戻る;
}
//キャンバスの2Dコンテキストを取得し、長方形を描画します
ctx = canvas.getContext（ "2d"）;
ctx.fillstyle = "black";
ctx.fillrect（0、0、canvas.width、canvas.height）;
//テキストに記入してストロークします
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）;
//パターンごとに記入してストロークします
ImageTexture = document.createElement（ 'img'）;
imageTexture.src = "../pattern.png";
imageTexture.onload = loaded（）;
}
function loaded（）{
//ロードされた画像に遅延します
Settimeout（TextureFill、1000/30）;
}
関数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）;
//長方形を埋めます
ctx.fillstyle = woodfill;
ctx.fillrect（60、240、260、440）;
}
</script>
</head>
<body>
<h1> html5キャンバステキストデモ - 暗い魚による</h1>
<pre>塗りつぶしとストローク</pre>
<div>
<canvas> </canvas>
</div>
</body>
</html>