HTML5 ~ Canvas로 간단한 그림 앱을 만들어 보았습니다.

도트 인스톨의 강좌 「Canvas로 그림 앱」을 수강했습니다.
링크☟
h tps : // Dochin s tar. 코 m / ぇそん s / 두오 d ぇ _ ゔ ぁ s
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시간 정도로 사사트할 수 있으므로 꼭.