canvasで遊ぼう

自己紹介

• 名前：清水正行 / _shimizu

• 職業：高崎でエンジニアやってます

• 趣味：GIS(地理情報システム)

• 　　　データ・ビジュアライゼーション

• 　　　モンハン

よろしく

改めて、canvasで遊ぼう！

HTML5からcanvas要素が追加されました

canvas要素とは？

What is Canvas?

Canvasは図形などを描画することができる新しいHTML要素です

JavaScriptを使ってグラフィックを作成することができます。

主にブラウザーゲームなどに利用されますが、今回はちょっと別の使い方を紹介します。

Canvasを使った画像操作

HTMLにおける画像とは？

いままで、画像ファイルのデータというのはフロントエンドエンジニアには操作できない要素でした。

しかし、canvas要素の登場により画像をピクセル単位で操作することが可能となりました。

Canvasを使った画像操作サンプル

画像をcanvasに転写し編集(赤色強調)

    var canvas = document.getElementById('canvas');
    if ( ! canvas || ! canvas.getContext ) { return false; }
    var ctx = canvas.getContext('2d');

     /* Imageオブジェクトを生成 */
    var img = new Image();
    img.src = "../gunmachan.jpg?" + new Date().getTime();
    img.onload = function() {
        ctx.drawImage(img, 0, 0);　//canvasに転写

	var imgData = ctx.getImageData(0, 0, 300, 364); //pixcelデータを取得
	
	//pixcel loop 赤を強調
	for (var i = 0; i < imgData.data.length; i += 4) {
	    imgData.data[i] = 255;		//R
	    //imgData.data[i + 1] 		//G
	    //imgData.data[i + 2] 		//B
	    //imgData.data[i + 3] 		//α
	}
	
	ctx.putImageData(imgData,0,0); //canvasに再度転写
    }
	

実行結果

左：元画像　右：Canvas上で加工

他にもある
Canvasの機能

Canvasでできること

画像(image)だけでなくvideoタグで読み込んだ動画データからもピクセル情報を読み取ることができます。

他、Webカメラからインプットされたデータも取得できます。

どんなことができるの？

DEMO

• 画像処理

• 動画処理

• WEBカメラ処理

まとめ

Canvasを使うといままでフロントエンドエンジニアにとって不可侵だった画像や動画を自在にコントロールすることができる！

つまり……

Canvasは楽しい！

おわり。