LoginSignup
5

More than 1 year has passed since last update.

HTML5 ~ Canvas で簡単なお絵かきアプリを作ってみた

Last updated at Posted at 2019-01-21

ドットインストールの講座「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時間位でササっとできるのでぜひ。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5