HTML5キャンバスプログレッシブフィリングと画像マスク効果の透明な実装

コメント：この記事では、キャンバスでの透明性の設定と使用を詳細に紹介します。段階的な充填と透明性のサポートを組み合わせて、画像のマスク効果を実現できます。線形プログレッシブメソッドコードのデモンストレーションは次のとおりです。興味のある友達はそれを参照できます。私はそれが誰にでも役立つことを願っています。

1：グラデーションフィル

Canvasは2つの増分充填方法をサポートします。1つは線形増分充填（ライン勾配充填）、もう1つは呼び出されます

放射状勾配充填。彼らの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（位置、色）;

位置は位置を表し、サイズ範囲[0〜1]、ここで0は最初のポイントを表し、1は2番目のポイントの座標を表します

色は、CSSの色値、色の値を表します。

プログレッシブフィルオブジェクトが作成され、構成された後、コンテキストのストロークスタイルと充填物の実装テキストを設定するために使用できます。

幾何学的な形のプログレッシブな色の詰め物。

線形進行アプローチのコードデモンストレーション：

1。垂直方向のプログレッシブの色

//垂直/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）'）;

ctx.fillstyle = linegradient;

ctx.fillrect（0、0、300、300）;

2。水平（x）方向の色の進行

// Horizo​​ntal/x方向

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方向）色プログレッシブ

//垂直方向および水平方向

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：透明

キャンバスでの透明性サポートは、グローバルおよびローカルの透明性の設定に分かれています。グローバルな透明性の設定を設定できます

Context.Globalalphaが実装されています。局所的な透明性は、fillstyleからAlpha Valueチャネルから色の値で設定できます

それを達成するために。コードの2つの方法は次のとおりです。

//グローバルアルファ値を変更します

ctx.globalalpha = 0.5;

ctx.fillrect（50,50,75,50）;

//塗りつぶしスタイルの色のアルファチャンネルを変更します

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 radialgradient = 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（）;

}