ドットインストールの講座「Canvasでお絵かきアプリ」を受講しました。
リンク☟
https://dotinstall.com/lessons/doodle_canvas
HTMLとjQueryをある程度知っていたらできるので、プログラミング初心者でも簡単にできますよ!
ぜひお試しあれ。
#作るもの
目標物はこんな感じ。
タイトルやテキストボックス、ボタンの作成方法はラクチンなので、今回は省きます。
#お絵かきキャンバスを用意する
まずは、お絵かきするキャンバスを用意します。
<canvas width="400" height="200" id="mycanvas"></canvas>
HTML5の方で用意されているからめっちゃ便利。
#マウス動作による変化を導入する
次に、それぞれの動作を導入。
変数の導入などはお任せします。
*クリック時
$('#mycanvas').mousedown(function(e){
isDrawing=true;
startX=e.pageX - $(this).offset().left - borderWidth;
startY=e.pageY - $(this).offset().top - borderWidth;
})
*マウスを動かした時
.mousemove(function(e){
// クリックを離したら処理を抜ける
if(!isDrawing) return;
x=e.pageX - $(this).offset().left - borderWidth;
y=e.pageY - $(this).offset().top - borderWidth;
// コンテクストを通じて描画
// 線の始まり
ctx.beginPath();
// 始点(startX,startY)まで移動
ctx.moveTo(startX,startY);
// (x,y)まで線を引く
ctx.lineTo(x,y);
ctx.stroke();
// 次の始点を(x,y)にする
startX=x;
startY=y;
})
*クリックを離した時
.mouseup(function(){
isDrawing=false;
})
*マウスがキャンバスからはみ出した時
.mouseleave(function(){
isDrawing=false;
});
*削除機能
$('#erase').click(function(){
if(!confirm('削除していいすか')) return;
// キャンバスの左上から右下を消す
ctx.clearRect(0,0,canvas.width,canvas.height);
});
#保存機能を追加
ここまでくれば、ほぼ完成!
最後に、保存機能を入れます。
$('#save').click(function(){
var img=$('<img>').attr({
width:100,
height:50,
src:canvas.toDataURL()
});
$('#gallery').append(img.addClass('thumbnail'));
// 画像をダウンロード
var link=$('<a>').attr({
href:canvas.toDataURL().replace('image/png','application/octet-stream'),
download:new Date().getTime() + '.png'
});
$('#gallery').append(link.append(img.addClass('thumbnail')));
// 保存したらキャンバスから削除
ctx.clearRect(0,0,canvas.width,canvas.height);
これで目標物完成です。 1時間位でササっとできるのでぜひ。