canvasでマスクをしてみる

Pocket
[`evernote` not found]

HTMLの装飾に関する話題です。
HTML5で追加される要素の一つにcanvasというものがあります。
canvasは、java scriptでベクター画像を描画するものなのですが、これを利用して画像にマスク処理をつけることができます。
こんな感じ。

DEMO

$(window).load(function() {
    $('#canvasList img').each(function() {
      createCanvas(this);

    //canvasに未対応の場合は、canvas要素の削除 対応している場合はimg要素の削除
    if($.browser.msie && $.browser.version < 9){
        $('canvas').remove();
    }else {
        $(this).remove();
    }
  });
});
function createCanvas(images) {
    var canvas = document.createElement('canvas');
    if(canvas.getContext){
        var ctx = canvas.getContext('2d');

    //canvasに画像の幅、高さを代入
    canvas.width = images.width;
    canvas.height = images.height;

    //マスクとなるcanvasを描画
    ctx.beginPath();
    ctx.moveTo(318.0, 119.2);
    ctx.bezierCurveTo(318.1, 230.7, 318.1, 237.7, 159.0, 237.7);
    ctx.bezierCurveTo(9.9, 237.7, 0.0, 184.6, 0.0, 119.2);
    ctx.bezierCurveTo(0.0, 53.8, 0.2, 8.3, 159.0, 0.7);
    ctx.bezierCurveTo(327.0, -7.3, 318.0, 53.8, 318.0, 119.2);
    ctx.closePath();

    //canvasに画像を貼り付け
    ctx.clip();
    ctx.drawImage(images, 0, 0);
    }
  images.parentNode.insertBefore(canvas, images);
};
&#91;/javascript&#93;

&#91;html&#93;
<div id="canvasList">
  <img src="images/img01.jpg" class="imgSrc" />
  <img src="images/img02.jpg" class="imgSrc2" />
</div>	
[/html]

canvasについて、深く語れる程の知識は持ち合わせていないのですが・・・
ざっくり基礎的な事をご説明すると

[javascript]
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

この2行がcanvasのAPIを扱うときの決まり文句で、まず、canvas要素を取得して、.getContext()メッソドを定義する事で、canvasで描画するためのメソッドやプロパティが取り出せるようになります。
ちなみに.getContext()の引数は、2dしか定義されていません。3dと定義して立体映像を描くなんてことはできないです。

ctx.beginPath();
ctx.moveTo(318.0, 119.2);
ctx.bezierCurveTo(318.1, 230.7, 318.1, 237.7, 159.0, 237.7);
ctx.bezierCurveTo(9.9, 237.7, 0.0, 184.6, 0.0, 119.2);
ctx.bezierCurveTo(0.0, 53.8, 0.2, 8.3, 159.0, 0.7);
ctx.bezierCurveTo(327.0, -7.3, 318.0, 53.8, 318.0, 119.2);
ctx.closePath();

こんな感じでで、座業を定義していきます。
ctx.beginPath();でパスの開始を定義して、ctx.closePath();で終わりを定義する感じですね。

この座標情報ですが、もちろん手書きで定義なんてできません。
Ai2Canvasというイラストレーターのプラグインを利用すると、簡単に書き出せます。

ctx.clip();
ctx.drawImage(images, 0, 0);

これでcanvasに画像を貼付けます。


$(window).load(function() {
$(‘#canvasList img’).each(function() {
createCanvas(this);

//canvasに未対応の場合は、canvas要素の削除 対応している場合はimg要素の削除
if($.browser.msie && $.browser.version < 9){ $('canvas').remove(); }else { $(this).remove(); } }); }); [/javascript] 最後に、#canvasList内の画像に対して、関数化してあったcanvasでのマスク処理を適用させます。 今回僕が作ったサンプルですと、元の画像をcanvasに貼付ける形になっていますので、このままですと、元の画像とcanvasで描画したマスク処理の画像の二つが表示されてしまいます。 それだと困りますので、画像を削除するわけですが、ここで、canvas未対応のブラウザを判別して、未対応の場合は、canvas要素を削除、それ以外は元の画像を削除するように指定する事で、どのブラウザでもそれなりに表示されるようにしてあります。 このような手法のメリットとして、元の画像はjpgでよいので、透過pngにする必要がなく、ファイルサイズを圧縮できる点があげられます。今回のサンプルですと、元画像をjpgにしてマスク処理をする場合、画像サイズは、33kbだったのに対して、同じような切り抜きをしたpng画像にすると124kbとなっていました。 元画像
透過pngにした場合

また、コードを書くだけで多量の画像にマスク処理を施せますので、作業効率もよいです。マスク自体もcanvasで描画しているので、動くマスク表現なんかのできてしまいます。そう、もはやFlashを使わなくてもかなりのデザイン表現ができるのです!

画像が大きかったり、マスクが複雑だと処理に時間がかかって、初回のロード時に一瞬元の画像が表示されて後からマスクがかかるような場合もあるかもしれません。
実務として利用するには、もう少し改良が必要ですが、一手間かけるだけで、表現力が増すのでは、こういった手法も覚えておくといいかもしれませんね。

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。