Blog

CanvasでPNGの透過を利用してシルエット画像を作る

2016.08.02Cat:Canvas html5 デザイナー
nino-eye

Canvasでは描画した画像を操作することで、様々な処理を行うことができます。

その中でも、PNGの不透明度(アルファチャンネル)を利用した、シルエット画像の作成方法について考えてみました。

↓作ってみたもの
DEMO

方法

  1. CanvasをHTMLに準備
  2. CanvasにPNG画像を読み込む
  3. Canvasの画像データを操作(不透明度(アルファチャンネル)以外を一定の値に)
  4. 操作した画像データをCanvasに描画

1. CanvasをHTMLに準備

2. CanvasにPNG画像を読み込む

3. Canvasの画像データを操作(不透明度(アルファチャンネル)以外を一定の値に)

Canvas上のRGBチャンネルの値を一定の値に固定することで、元画像の色の情報をなくし、
不透明度だけを残すことで、シルエットのデータができます。

4. 操作した画像データをCanvasに描画

 

DEMO

アルファチャンネルの振り分けを以下のように設定すれば、
半透明の画像からシルエットを作成することも可能です。

Author Profile

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

Archive

ページTOPへ