ホームページ > ウェブフロントエンド > H5 チュートリアル > html5 の globalCompositeOperation 属性の詳細な紹介

html5 の globalCompositeOperation 属性の詳細な紹介

不言
リリース: 2018-08-20 11:57:52
オリジナル
1844 人が閲覧しました

この記事の内容はCSS3でのbackground-orginの使い方(コード付き)です。必要な方は参考にしていただければ幸いです。

globalCompositeOperationのデフォルト値属性はsource-over

1です。Source-overとソースはターゲットの上にあります

context.fillStyle = 'aqua';
context.fillRect(50,50,100,100);//目标图形
context.globalCompositeOperation = 'source-over';
context.fillStyle = 'antiquewhite';
context.fillRect(100,100,100,100);//源图形
ログイン後にコピー

上のグラフィックはターゲットであり、下のグラフィックはソースです

2。 over target はソースの上にあります

3. Source-atop はターゲットの上にソースを描画しますが、他の位置に描画されたターゲットは不透明であり、ソースは透明です

context.fillStyle = 'aqua';
context.fillRect(50,50,100,100);
context.globalCompositeOperation = 'source-atop';
context.fillStyle = 'antiquewhite';
context.fillRect(100,100,100,100);
ログイン後にコピー

4. 重なっている部分では、どちらも不透明ですが、ソースは不透明で、ターゲットは透明です。ソースインとターゲットの重なった部分、ソースのみ表示され、他の部分は透明になります

6. デスティネーションイン ソースとデスティネーションの重なった部分、デスティネーションのみが表示され、その他は透明になります

7. Source-out はソースの重複しない部分のみを表示し、他の部分は表示されません

8. destination-out はデスティネーションの重複しない部分のみを表示し、他の部分は表示されません

9ライターの値は順序とは関係がありません。ソースと宛先が重なっている場合、2 つの色の値を加算して最大のカラー値 255 を取得します。値は白です

10、コピーはソースのみをコピーします

11、ソースとターゲットの重複しない部分のみをコピーし、重複する部分は透明になります

関連する推奨事項:

HTML5 の download 属性の詳細な紹介

H5 の使用方法の詳細な紹介フレキシブルボックスレイアウト(親コンテナ属性)

以上がhtml5 の globalCompositeOperation 属性の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート