2. 水平(X)方向颜色渐进

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

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

May 16, 2016 pm 03:49 PM
canvas mask

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. >

コードをコピーしますコードは次のとおりです:
//horizo​​ntal/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();
}
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

キャンバスを使用している学校はどこですか? キャンバスを使用している学校はどこですか? Aug 18, 2023 pm 05:59 PM

Canvas を使用している学校には、スタンフォード大学、MIT、コロンビア大学、カリフォルニア大学バークレー校などが含まれます。詳細な紹介: 1. スタンフォード大学は、主要なオンライン学習プラットフォームとして Canvas を使用しています。スタンフォード大学の教師と学生は、Canvas を使用してコースの内容を管理および伝達し、オンライン ディスカッション、課題の提出、試験などの機能を通じて学習します。2. マ州Polytechnic Institute と MIT もオンライン学習管理システムとして Canvas を使用しており、Canvas プラットフォームを通じてコース管理を行っています。3. コロンビア大学など。

キャンバス矢印プラグインとは何ですか? キャンバス矢印プラグインとは何ですか? Aug 21, 2023 pm 02:14 PM

キャンバス矢印プラグインには、1. シンプルで使いやすい API を備え、カスタムの矢印効果を作成できる Fabric.js、2. 矢印を描画する機能を提供し、さまざまな矢印を作成できる Konva.js が含まれます。スタイル; 3. 豊富なグラフィックス処理機能を提供し、さまざまな矢印効果を実現できる Pixi.js; 4. 矢印のスタイルやアニメーションを簡単に作成および制御できる Two.js; 5. さまざまな矢印効果を作成できる Arrow.js ; 6. 大まかな.jsでは、手描きの矢印などが作成できます。

キャンバスクロックの詳細は何ですか? キャンバスクロックの詳細は何ですか? Aug 21, 2023 pm 05:07 PM

キャンバス時計の詳細には、時計の外観、目盛り、デジタル時計、時針、分針、秒針、中心点、アニメーション効果、その他のスタイルなどが含まれます。詳細な紹介: 1. 時計の外観、キャンバスを使用して時計の外観として円形の文字盤を描画し、文字盤のサイズ、色、境界線などのスタイルを設定できます; 2. 目盛り線、目盛り線を描画します。位置; 3. デジタル時計、現在の時と分を示すために文字盤にデジタル時計を描くことができます; 4. 時針、分針、秒針など。

html2canvas にはどのようなバージョンがありますか? html2canvas にはどのようなバージョンがありますか? Aug 22, 2023 pm 05:58 PM

html2canvas のバージョンには、html2canvas v0.x、html2canvas v1.x などが含まれます。詳細な紹介: 1. html2canvas v0.x (html2canvas の初期バージョン) 最新の安定バージョンは v0.5.0-alpha1 です。これは、多くのプロジェクトで広く使用され、検証されている成熟したバージョンです。2. html2canvas v1.x、これは html2canvas の新しいバージョンです。

uniapp は、キャンバスを使用してチャートやアニメーション効果を描画する方法を実装します。 uniapp は、キャンバスを使用してチャートやアニメーション効果を描画する方法を実装します。 Oct 18, 2023 am 10:42 AM

キャンバスを使用して uniapp でチャートやアニメーション効果を描画する方法には、特定のコード例が必要です。 1. はじめに モバイル デバイスの普及に伴い、モバイル端末上でさまざまなチャートやアニメーション効果を表示する必要があるアプリケーションがますます増えています。 uniapp は、Vue.js に基づくクロスプラットフォーム開発フレームワークとして、キャンバスを使用してチャートやアニメーション効果を描画する機能を提供します。この記事では、uniapp がキャンバスを使用してチャートやアニメーション効果を実現する方法を紹介し、具体的なコード例を示します。 2.キャンバス

html2canvas はどのスタイルに対して無効ですか? html2canvas はどのスタイルに対して無効ですか? Nov 24, 2023 pm 03:25 PM

無効なスタイルには、CSS3 アニメーションとトランジション、CSS フィルター効果、CSS3 複雑なグラフィックスとパス、一部の CSS3 機能、疑似要素と一部の CSS 機能、Z インデックス、背景画像とグラデーションなどが含まれます。詳細な紹介: 1. CSS3 アニメーションとトランジション: html2canvas は CSS3 アニメーションとトランジションの効果を完全にはキャプチャできない可能性があります。最終的なスタイルをキャプチャするよう試みられますが、これらのアニメーションとトランジションは変換プロセス中に失われる可能性があります; 2. CSS フィルター効果: ぼかしや影などのフィルターは変換プロセス中に保持されない場合があります。

中国教育分野におけるCanvasの発展動向と将来展望 中国教育分野におけるCanvasの発展動向と将来展望 Jan 17, 2024 am 10:22 AM

科学技術の急速な発展と教育分野における情報技術の広範な応用に伴い、Canvas は世界をリードするオンライン学習管理システムとして、中国の教育業界で徐々に台頭してきています。 Canvas の登場は、中国の教育と指導方法の改革に新たな可能性をもたらします。この記事では、中国の教育分野におけるCanvasの開発傾向と展望について探っていきます。まず第一に、中国の教育分野における Canvas の開発トレンドの 1 つは、徹底した統合です。クラウド コンピューティング、ビッグ データ、人工知能の急速な発展により、Canvas はますます

tkinter Canvas にはどのようなプロパティがありますか? tkinter Canvas にはどのようなプロパティがありますか? Aug 21, 2023 pm 05:46 PM

tkinter Canvas 属性には、bg、bd、relief、width、height、cursor、highlightbackground、highlightcolor、highlightthickness、insertbackground、insertwidth、selectbackground、selectforeground、xscrollcommand 属性などが含まれます。詳しい紹介

See all articles