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

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

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

イベント毎の処理を記述

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')));