Canvasで書いたものを初期状態に戻す

はじめに

Canvas関連の記事にアクセスが増えて来たので、今後色々書いていこうかと思います。

以前に以下の記事を書きました。

: 参考Canvasを使って手書きの署名機能を実装する

ルート営業を行うクライアントから、タブレットの契約書に手書きで署名できる機能が欲しいと言われました。
アプリで作ろうか悩みましたが、試しにHTML５で実装したものを提案してみました。

続きを見る

: 参考Canvasで書いたものを画像に変換する

Canvasで署名したものを画像に変換します。そして、書いたものを消せるように消しゴム機能も実装しました。

続きを見る

: 参考Canvasに「戻る」や「進む」の機能を搭載してみた

前々からCanvasにペイントツールのような「戻る」や「進む」の機能が欲しいなと思っていました。

続きを見る

Canvasの内容を初期化

以前に消しゴム機能うんぬんの記事を書きましたが、今回は、丸ごと全部初期化してしまう方法を書こうかと思います。

■ソース

<div>
  <button type="button" onclick="resetCanvas()">リセット</button>
</div>
<canvas id="canvassample" width="500" height="300"></canvas>

canvas {
    position: relative;
    border:3px solid #000;
}
 
div#img-box{
  border:3px solid #000;
  width:500px;
}
 
div#btn-box{
    position: fixed;
    bottom :0px;
}

var canvas = document.getElementById('canvassample'),
    ctx = canvas.getContext('2d'),
    moveflg = 0,
    Xpoint,
    Ypoint;
 
//初期値（サイズ、色、アルファ値）の決定
var defSize = 7,
    defColor = "#555";

// PC対応
canvas.addEventListener('mousedown', startPoint, false);
canvas.addEventListener('mousemove', movePoint, false);
canvas.addEventListener('mouseup', endPoint, false);
// スマホ対応
canvas.addEventListener('touchstart', startPoint, false);
canvas.addEventListener('touchmove', movePoint, false);
canvas.addEventListener('touchend', endPoint, false);
 
function startPoint(e){
  e.preventDefault();
  ctx.beginPath();
  console.log(e.clientX);
 
   
  // 矢印の先っぽから始まるように調整
  Xpoint = e.clientX-8;
  Ypoint = e.clientY-8;
   
  ctx.moveTo(Xpoint, Ypoint);
}
 
function movePoint(e){
  if(e.buttons === 1 || e.witch === 1 || e.type == 'touchmove')
  {
    Xpoint = e.pageX-8;
  　Ypoint = e.pageY-8;
    moveflg = 1;
     
    ctx.lineTo(Xpoint, Ypoint);
    ctx.lineCap = "round";
    ctx.lineWidth = defSize * 2;
    ctx.strokeStyle = defColor;
    ctx.stroke();
     
  }
}
 
function endPoint(e)
{
    if(moveflg === 0)
    {
       ctx.lineTo(Xpoint-1, Ypoint-1);
       ctx.lineCap = "round";
       ctx.lineWidth = defSize * 2;
       ctx.strokeStyle = defColor;
       ctx.stroke();
        
    }
    moveflg = 0;
    
    setLocalStoreage();
}

function resetCanvas() {
    ctx.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
    console.log('リセット！');
}

■デモ

See the Pen Canvas reset by カバの樹 (@kabanoki) on CodePen.0

いかがでしょか？
今日はこのへんでー

Canvasで書いたものを初期状態に戻す

はじめに

参考Canvasを使って手書きの署名機能を実装する

参考Canvasで書いたものを画像に変換する

参考Canvasに「戻る」や「進む」の機能を搭載してみた

Canvasの内容を初期化

■ソース

■デモ