HTML5 Canvas のプログレッシブ塗りつぶしと透明度による画像のマスク効果を実現

この記事では、Canvas での透明度の設定と使用方法について詳しく説明します。プログレッシブ塗りつぶしと透明度のサポートを組み合わせて、画像のマスク効果を実現します。興味のある方は次のコードをご覧ください。ヘルプ

HTML5のキャンバスでのプログレッシブ塗りつぶしのパラメータ設定と使用方法、およびプログレッシブ塗りつぶしと透明度のサポートを組み合わせて実現する方法について詳しく説明します。画像のマスク効果。

1: グラデーション塗りつぶし
Canvas は 2 つの段階的な塗りつぶし方法をサポートしています。1 つは線形グラデーション塗りつぶし (Line Gradient Fill)、もう 1 つは
放射状グラデーション塗りつぶし (RadialGradient Fill) と呼ばれます。 API は次のとおりです:
createLinearGradient(x1, y1, x2, y2); ここで、x1、y1 は最初の点の座標、x2、y2 は 2 番目の点の座標です。
createRadialGradient(x1, y1, r1, x2, y2, r2); ここで、x1、y1 は最初の中心点の座標、r1 は半径、x2、y2 は 2 番目の中心点の座標、r2 は半径。
各ポイントの色を設定します
addColorStop(position, color);
position は位置を表し、サイズの範囲は [0~1] で、0 は最初のポイントを表し、1 は 2 番目のポイントの座標を表します
Color は色の値を表します、任意の CSS カラー値。
プログレッシブ塗りつぶしオブジェクトを作成して構成した後、それを使用してコンテキストのストロークスタイルとfillStyleを設定して、テキスト、
幾何学的形状のプログレッシブカラー塗りつぶしを実装できます。

線形グラデーションメソッドのコードデモ:

1. 垂直 (Y) 方向のカラーグラデーション

// vertical/Y direction 
var lineGradient = ctx.createLinearGradient (50, 0, 50, 200); 
lineGradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); 
lineGradient.addColorStop(1, 'rgba(255, 255, 0, 1)'); 
ctx.fillStyle = lineGradient; 
ctx.fillRect(0, 0, 300, 300);

2. 水平 (X) 方向のカラーグラデーション

// horizontal/X direction 
var lineGradient = ctx.createLinearGradient (0, 50, 200, 50); 
lineGradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); 
lineGradient.addColorStop(1, 'rgba(255, 255, 0, 1)'); 
ctx.fillStyle = lineGradient; 
ctx.fillRect(0, 0, 300, 300);

3.そして水平同時に (XY 方向に) 色が徐々に進行します

// vertical and horizontal direction 
var lineGradient = ctx.createLinearGradient (0, 0, 200, 200); 
lineGradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); 
lineGradient.addColorStop(1, 'rgba(255, 255, 0, 1)'); 
ctx.fillStyle = lineGradient; 
ctx.fillRect(0, 0, 300, 300);

2: 透明度 (透明)
Canvas の透明度サポートは、グローバル透明度設定とローカル透明度設定に分かれています
を設定することで、グローバル透明度設定を実現できます。 Context.globalAlpha。ローカルの透明度は、fillStyle を介してカラー値にアルファ値チャネル を設定することで実現できます。 2 つのメソッドのコードは次のとおりです:

// change global alpha value 
ctx.globalAlpha=0.5; 
ctx.fillRect(50,50,75,50);

// change fill style color's alphachannel 
ctx.fillStyle = 'rgba(225,225,225,0.5)'; 
ctx.fillRect(50,50,75,50);

2 つの効果は同じです。

3 その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

以上がHTML5 Canvas のプログレッシブ塗りつぶしと透明度による画像のマスク効果を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。