HTML5 キャンバスのプログレッシブ塗りつぶしと透明度による画像マスク効果_html5 チュートリアルのスキル-H5 チュートリアル-php.cn

HTML5 キャンバスのプログレッシブ塗りつぶしと透明度による画像マスク効果_html5 チュートリアルのスキル

WBOY

リリース： 2016-05-16 15:49:18

オリジナル

1315 人が閲覧しました

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

1: グラデーション塗りつぶし (Gradient Fill)
キャンバスは 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 番目のポイントの座標を表します。 point
Color は、カラー値 (任意の CSS カラー値) を表します。
プログレッシブ塗りつぶしオブジェクトを作成して構成した後、それを使用してコンテキストのストロークスタイルとフィルスタイルを設定して、テキスト、
幾何学的形状の段階的なカラー塗りつぶしを実装できます。

線形グラデーション法のコード例:
1. 垂直 (Y) 方向のカラーグラデーション

コピーコード

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

// 垂直/Y 方向
var lineGradient = ctx.createLinearGradient (50, 0, 50, 200);
lineGradient.addColorStop(0, 'rgba(255, 0, 0, 1)');
lineGradient.addColorStop(1, 'rgba(255, 255, 0, 1)'); .fillStyle = lineGradient;
ctx.fillRect(0, 0, 300, 300);

2. >

コードをコピーしますコードは次のとおりです:

//horizontal/X方向

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

3. 垂直方向と水平方向の同時の色進行 (XY 方向)

コードをコピーします

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

// 垂直方向と水平方向 var lineGradient = ctx.createLinearGradient (0, 0, 200, 200); lineGradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); lineGradient.addColorStop(1, 'rgba(255, 0, 1)'); lineGradient; ctx.fillRect(0, 0, 300, 300);

2: 透明度 (透明)

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

// グローバルアルファ値を変更します
ctx.globalAlpha=0.5;

ctx.fillRect(50,50,75,50);塗りつぶしスタイルの色の alphachannel
ctx.fillStyle = 'rgba(225,225,225,0.5)'; ctx.fillRect(50,50,75,50); 2 つの効果は同じです。

3: 写真の透明グラデーションマスク効果

放射状のカラーグラデーションと透明度の変更を使用して、画像に半透明のマスク効果を実現します。スクリプト実行効果:

コードをコピーします
コードは次のとおりです:

var myImage = document.createElement('img');
myImage.src = "../test.png";
myImage.onload = function() {
ctx.drawImage(myImage, 80, 30, myImage.naturalWidth, myImage.naturalHeight);
var radioGradient = ctx.createRadialGradient (canvas.width/2, Canvas.height/2, 10, Canvas.width/2, Canvas.height/2, 200);
radialGradient.addColorStop(0, 'rgba(247, 247, 247, 0)');
radialGradient.addColorStop(0.7, 'rgba(120, 120, 120, 0.5)');
radialGradient.addColorStop(0.9, 'rgba(0, 0, 0, 0.8)');
radialGradient.addColorStop(1, 'rgba(238, 238, 238, 1)');
ctx.beginPath();
ctx.arc(canvas.width/2, Canvas.height/2, 300, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = RadialGradient;
ctx.fill();
}