HTML5 キャンバスのテキストの塗りつぶし、線分の属性、トリミング、透明度、ピクセルの結合方法

CSS3 の多くのプロパティは、キャンバスのいくつかのプロパティと比較できます
キャンバスの「ブラシ」環境オブジェクトの多くのプロパティは、CSS3 のプロパティと比較できます
グラフィックを描画するだけでなく、テキストを追加することもできますキャンバス

テキストの塗りつぶし

最初に要素オブジェクトと環境オブジェクトも取得します

<canvas id="myCanvas" width=500 height=500></canvas>

var canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d');

fontはフォント属性を設定するために使用されます
fillTextはエンティティのテキストと位置を設定します
ストロークTextは中空のテキストと位置を設定します

ctx.fillStyle = 'red';
ctx.font = '50px sans-serif';
ctx.fillText('hello world!', 100, 100);

フォントは次のことができますCSSのフォント属性を参照
デフォルト値「10px sans-serif」

---

文字幅を測る方法もあるので知っておいてください
measureText()

console.log(ctx.measureText('hello world!').width);

線分属性

線分Coverage

lineCap()は、線分のカバレッジ属性を設定するために使用されます
値は、butt/square/roundの3つがあります

ctx.lineCap = 'butt'; //默认ctx.lineWidth = 50;
ctx.moveTo(100, 100);
ctx.lineTo(400, 100);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = 'square';
ctx.lineWidth = 50;
ctx.moveTo(100, 200);
ctx.lineTo(400, 200);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = 'round';
ctx.lineWidth = 50;
ctx.moveTo(100, 300);   
ctx.lineTo(400, 300);
ctx.stroke();

写真内の灰色の線は私が追加したものです
3つの価値のある違いがわかるように

線分結合

lineJoin()は線分結合の動作を定義します
miter/round/bevelの3つの値もあります

ctx.lineWidth = 40;
ctx.lineJoin = 'miter'; //默认ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();

---

ctx.lineWidth = 40;
ctx.lineJoin = 'round'; //改ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();

---

ctx.lineWidth = 40;
ctx.lineJoin = 'bevel'; //改ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();

---

私たちがデフォルトのマイターを使用します
2つの線分の角度が非常に小さい場合
「ポインタ」はどんどん大きくなります

ある程度「尖っている」場合は、デフォルト値が常になります

この制限を突破するように設定するには、miterLimit を使用します
このようにして、デフォルト値の長さは、limit* lineWidth/2 に設定されます
それを理解してください

ctx.miterLimit = 30;

Crop

クリップ属性これは、現在のパスの外側の領域が描画されなくなることを意味します
これは、キャンバスから現在の領域を切り取ることと同じです

ctx.arc(250, 250, 100, 0, Math.PI*2, 0);ctx.clip();ctx.fillRect(0, 0, 500, 500);

ここでは、キャンバスを切り取って円を作成します
このように、長方形を塗りつぶすときは、それのみを行うことができますこの「円形のキャンバス」を塗りつぶします

透明度

globalAlphaを使用してグローバル透明度を設定します
これは非常に簡単なので、あまり説明しません

ctx.globalAlpha = 0.4;ctx.fillRect(100, 100, 300, 300);

ピクセルマージ

globalCompositeOperationを使用して
新しい方法を設定しますグラフィックス ピクセルは古いグラフィックス ピクセルとマージされます
値は 11 個あります
一般的な値は 3 つあり、ソース オーバー (デフォルト)/デスティネーション オーバー/コピーです
ソース オーバーは描画後のものです グラフィックスは描画の上にオーバーレイされます最初に描画されるグラフィックス
destination-over は、最初に描画されたグラフィックスの上に描画されます。
copy は、後で描画されたグラフィックスのみを表示します (最初に描画されたグラフィックスは消えます)。このように（さまざまなブラウザ実装レベルまたはさまざまな方法で）

ctx.fillStyle = 'blue';
ctx.fillRect(100, 100, 200, 200);
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'red';
ctx.arc(300, 300, 100, 0 ,Math.PI*2, 0);
ctx.fill();

以下に、参考までにChromeの最新バージョンでテストした11の値を示します

source-over:

目的地:

コピー:

ライター:

目的地:

source-out:

destination-out:

上記は、HTML5 Canvas のテキストの塗りつぶし、線分属性、トリミング、透明度、ピクセルの結合方法の内容です。その他の関連コンテンツについては、お支払いください。 PHP 中国語 Web サイト (www.php.cn) に注意してください。