HTML5 でテクスチャの塗りつぶしとストローク (Fill And Stroke) を実装する方法 Canvas_html5 チュートリアル スキル

HTML5 のキャンバスの塗りつぶしとストロークのテキスト効果、およびキャンバスに基づいてテクスチャの塗りつぶしとストロークを実装する方法を示します。

1: カラーの塗りつぶしとストローク
カラーの塗りつぶしは fillStyle を通じて実現でき、ストロークのカラーは stopStyle を通じて実現できます。簡単な例
は次のとおりです。

コードをコピーします

コードは次のとおりです:

// テキストの塗りつぶしとストローク
ctx.font = '60pt Calibri';
ctx.ストロークスタイル = 'green'; Hello World!', 20 , 100);
ctx.fillStyle = 'red'
ctx.fillText('Hello World!', 20, 100); >2: テクスチャの塗りつぶしとストローク

HTML5 Canvas では、テクスチャ画像を読み込んでブラシ パターンを作成することにより、テクスチャ パターンを作成する API が ctx.createPattern(imageTexture, "repeat") になります。 ; 2 番目のパラメータは 4 つをサポートします。値は「repeat-x」、「repeat-y」、「repeat」、および「no-repeat」です。これは、テクスチャが X 軸に沿って繰り返すか繰り返さないことを意味します。それぞれ Y 軸、XY 方向です。テクスチャ ストロークと塗りつぶしのコードは次のとおりです:

コードをコピーします

コードは次のとおりです:

var woodfill = ctx.createPattern(imageTexture,"repeat"); ctx.drawingStyle = woodfill; ctx.ストロークText('Hello World!', 20, 200); // 四角形を塗りつぶします

ctx.fillStyle = woodfill;

ctx.fillRect(60, 240, 260, 440);

テクスチャ画像:



3: 実行エフェクト

コード:

コードをコピー


コードは次のとおりです。

互換性のある" content="chrome=IE8" >

<script> // グローバル変数 2d context; <div class="msgborder" id="phpcode33">var imageTexture = null; <br>window.onload = function() { <br>var Canvas = document.getElementById("text_canvas"); <br>console.log(canvas.parentNode.clientWidth); >canvas.width = Canvas.parentNode.clientWidth; <br>canvas.height = Canvas.parentNode.clientHeight; <br>if (!canvas.getContext) { <br>console.log("キャンバスはサポートされていません。 HTML5 互換ブラウザ。"); <br>return; <br>} <br>// キャンバスの 2D コンテキストを取得し、長方形を描画 <br>ctx = Canvas.getContext("2d"); <br>ctx.fillStyle= "black"; <br>ctx.fillRect(0, 0, Canvas.width, Canvas.height); <br>// テキストを塗りつぶし、ストロークします。 <br>ctx.font = '60pt Calibri'; lineWidth = 3; <br>ctx.ストロークスタイル = 'green'; <br>ctx.fillStyle = 'red'; ('Hello World!', 20, 100); <br>// パターンで塗りつぶしとストロークを行う <br>imageTexture = document.createElement('img') <br>imageTexture.src = "../pattern.png "; <br>imageTexture.onload =loaded(); <br>} <br>functionloaded() { <br>// 画像のロードまでの遅延 <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"); ctx.ストロークText('Hello World!' , 20, 200); <br>// 四角形を塗りつぶします <br>ctx.fillStyle = woodfill; <br> <br></script>

Gloomy Fish

作成塗りつぶしとストローク

;/ボディ>