one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【16:Doodle】Canvasでお絵描きアプリを作る

f:id:seintoseiya:20150619003846p:plain
プロジェクトNo.16:Doodle(Canvas)

jQueryHTML5Canvasを使って描画ツールを作成しました。
線と四角の描画、色の変更、太さの変更、消去、ギャラリーに追加、ギャラリーのデータを保存する事が可能です。

イベント毎の処理を記述

jQueryのイベントを設定します。
今回使ったのはマウスイベントとinput要素のイベントです。

JavaScript

$('#mycanvas').mousedown(function(e) {
 // #mycanvas内でマウスダウンした時のイベント
})
.mousemove(function(e) {
 // (このように連結してかける)#mycanvas内でマウスを動かした時のイベント
})
.mouseup(function(e){
 // #mycanvas内でマウスアップした時のイベント
})
.mouseleave(function(){
 // #mycanvas外に出た時のイベント
});

$('#penType').change(function(){
 // #penTypeの値を変えた時のイベント
});
$('#erase').click(function(){
 // #eraseをクリックした時のイベント
});

属性指定したコンテンツを追加

jQueryのappendメソッドを使ってコンテンツを追加します。
また事前にattrメソッドで属性値も指定しておきます。

JavaScript

var img = $('<img>').attr({
    src: canvas.toDataURL(),
    download: new Date().getTime() + '.png'
});
var link = $('<a>').attr({
    href: canvas.toDataURL().replace('image/png', 'application/octet-stream'),
    download: new Date().getTime() + '.png'
});
$('#gallery').append(link.append(img.addClass('thumnail')));

参考サイト

今回はここで紹介されているものに機能を追加したものになります。
Canvasでお絵かきアプリ (全8回) - プログラミングならドットインストール

全ソースはこちら

github.com

関連アプリ・書籍

HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 (Mynavi Examination Library)

HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 (Mynavi Examination Library)

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック