Blog

【Canvas】円でぼかしのような視覚効果

2016.02.23Cat:Canvas javascript デザイナー
nino-eye

メインの被写体に注目させたり、遠近感を出すとき、
背景をぼかす効果が威力を発揮します。

背景にあるものをぼかす場合、
以下の様なぼかしの方法(Photoshopでいうガウス)が、一番良く使われると思います。

blog_img03

この効果をHTML5のCanvasで使うと表現の幅が広がって良さそうだと思ったのですが、
Canvasでこの効果を再現しようとすると、非常に演算が重くなるという難点があり、
CSSやSVGのfilterでもその問題は同様です。

そこで、ほかにぼかしの効果として使えるものはないかといろいろ試している中、
カメラで撮影した場合に見られる、以下の様なぼかしの効果に今更ながら気づきました。

blog_img01

↓↓ 拡大 ↓↓

blog_img02

ボケたところは単純にぼやけているわけではなく、
カメラの絞りの形が重なり合ったようになっているんですね。
特に明るいところではこの形がはっきりとしています。
焦点が外れたところほど、その形は大きくなっています。

(ちなみにPhotoshopにも、「ぼかし(レンズ)」というフィルターが用意されています)

これに気づいて、円形をランダムに散りばめたように描画することで、
ぼかしの効果が再現できるのではないかと思って、
Canvasを使ってやってみました。

↓作ってみたもの

DEMO

↓できた画像

nino-eye

方法

方法は以下のように、焦点の違う場所ごとに画像を準備し、
それぞれの画像をCanvasに読み込んで、
焦点が外れたところほど大きな円で描画するというものです。

blog_img04

Canvasのコードは以下のとおり

HTML

まずHTMLでは、表示用のCanvasと、画像の情報を取得するためのCanvasを準備し、
情報取得用のCanvasはCSSで非表示にします。

JavaScript

JavaScriptの処理はおおよそ以下の様な流れです。

  1. Canvasの基本的な準備(要素を指定して、コンテキストを定義)をして、情報取得用の方のCanvasに画像を読み込みます
  2. 画像の色の情報を取得し、取得した場所に焦点のハズレ具合に応じた細かさの円を描画します
  3. 上記を繰り返し、奥から手前の順番で描画を行っていきます

 

実際やってみると、一般的なぼかしほどではないものの、それなりに処理に時間はかかるので、
動きの大きなものには向かないと思いました。

ただ、独特の雰囲気が出るので、
雰囲気がデザインにハマるようなら使うのもありかもしれないと思いました。

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ