純粋な JavaScript_javascript スキルを使用して HTML5 Canvas に 6 つの特殊効果フィルターを実装する例-jsチュートリアル-php.cn

純粋な JavaScript_javascript スキルを使用して HTML5 Canvas に 6 つの特殊効果フィルターを実装する例

WBOY

リリース： 2016-05-16 17:30:56

オリジナル

1106 人が閲覧しました

私はそれに挑戦し、6 つのシンプルで一般的な HTML5 Canvas 特殊効果フィルターを実装し、それらを純粋な JavaScript 呼び出し可能な API ファイル gloomyfishfilter.js にカプセル化しました。 サポートされている特殊効果フィルターは次のとおりです:
1. 反転カラー
3. ぼかし
4. 彫刻
6.ミラー

フィルター原理の説明:
1. 逆色: ピクセル RGB 値 r、g、b を取得し、新しい RGB 値は (255-r, 255 -g) です。、255-b) 2. グレートーン: ピクセル RGB 値 r、g、b を取得します。新しい RGB 値は

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

newr = (r * 0.272) (g * 0.534) (b * 0.131); * 0.686) (b * 0.168);

newb = (r * 0.393) (g * 0.769) (b * 0.189); 

 
3 は 5*5 ボリュームに基づきます。コア
4. レリーフと彫刻: 

現在のピクセルの前のピクセルの RGB 値と次のピクセルの RGB 値に 128 を加えた値に基づいて
5. ミラー: オブジェクトをシミュレートします。ミラーには対応する効果が反映されます。
その他の準備
1. Canvas 2d context オブジェクトの取得方法

コードをコピーコードは次のとおりです。 var Canvas = document.getElementById("target");

canvas.width = source.clientWidth;

canvas.height = source.clientHeight; .getContext) { 
console.log("キャンバスはサポートされていません。HTML5 互換のブラウザをインストールしてください。"); 
return; 
} 
// キャンバスの 2D コンテキストを取得し、画像を描画します 
 tempContext = Canvas.getContext ("2d"); 

 
2. DOM img オブジェクトを Canvas オブジェクトに描画する方法 

コードをコピー

コードは次のとおりです。 var source = document.getElementById("source") tempContext.drawImage(source, 0, 0, Canvas .width,canvas.height);

3. Canvas オブジェクトからピクセルデータを取得する方法

コードをコピーします。

コードは次のとおりです。 var Canvas = document.getElementById("target"); varlen = Canvas.width * Canvas.height * 4; = tempContext.getImageData(0, 0, Canvas.width , Canvas.height); var binaryData = CanvasData.data;

4. DOM オブジェクトにマウス クリック イベント バインドを実装する方法🎜>

コードをコピー

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

function bindingButtonEvent(element, type, handler) { if(element.addEventListener){ element.addEventListener(type, handler,false); }else { element.attachEvent('on' type, handler);// IE6,7,8 の場合

}

} 

5. 実装された gfilter API を呼び出してフィルター関数を完了する方法

コードをコピーします

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

gfilter.colorInvertProcess(binaryData, len); // API の呼び出し 6. ブラウザのサポート: IE、FF、および Chrome でのサポートは次のタグによって実現されます。 :

コードをコピー

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

効果デモ:

 アプリケーションソースコード: 
 
CSS部分: 

純粋な JavaScript_javascript スキルを使用して HTML5 Canvas に 6 つの特殊効果フィルターを実装する例

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

#svgContainer { width :800px; 高さ:600px; 背景色:#EEEEEE; #sourceDiv { float: 左; 境界: 2px 青} #targetDiv { float: right; border: 2px 実線の赤}

 
filter1.html の HTML ソース コード: 

コードをコピー

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

キャンバスフィルターのデモ

著者別の最新記事

NullPointerException とは何ですか?どのように修正すればよいですか?

2024-10-22 09:46:29
初心者からプログラマーへ: 旅は C の基礎から始まります

2024-10-13 13:53:41
PHP による Web 開発のロックを解除する: 初心者ガイド

2024-10-12 12:15:51
C の謎を解く: 新人プログラマーのための明確でシンプルな道

2024-10-11 22:47:31
コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング

2024-10-11 19:36:51
内なるプログラマーを解き放つ: まったくの初心者のための C

2024-10-11 15:50:41
C で生活を自動化する: 初心者向けのスクリプトとツール

2024-10-11 15:07:41
PHP を簡単に: Web 開発の最初のステップ

2024-10-11 14:21:21
Python で何でも構築: 創造性を解き放つための初心者ガイド

2024-10-11 12:59:11
コーディングの鍵: 初心者のための Python の力を解き放つ

2024-10-11 12:17:31