スポンサーリンク

HTML5のCanvasを使うと、マウスやタッチペンなどで文字や絵を描くことができます。

今回はサイン(署名)ができるような簡単な機能を作る方法です。

※ コピペでそのまま動くと思いますが、自己責任で使用して下さい。

サンプル

以下の枠内にマウスやタッチペンなどで文字を書いたり絵を描いたりすることができます。クリアボタンで書いた内容が消えます。


HTML

canvasタグのwidth、heightはCSSで設定してしまうと文字や絵を描くときにズレが生じてしまいます。そのためwidth、heightはcanvasタグの属性で設定を行います。

<canvas id="canvas" width="800px" height="200px" style="border: solid 1px #222;"></canvas>
<br>
<input type="button" id="clear" value="クリア">
スポンサーリンク

Javascript

  // canvas
  var cnvs = document.getElementById('canvas');
  var ctx = cnvs.getContext('2d');
  // クリックフラグ
  var clickFlg = false;

  // マウス
  cnvs.addEventListener('mousedown', draw_start, false);
  cnvs.addEventListener('mousemove', draw_move, false);
  cnvs.addEventListener('mouseup', draw_end, false);
  // スマホ・タブレット
  cnvs.addEventListener('touchstart', draw_start, false);
  cnvs.addEventListener('touchmove', draw_move, false);
  cnvs.addEventListener('touchend', draw_end, false);

  // クリアボタン
  var clearBtn = document.getElementById('clear');
  clearBtn.addEventListener('click', click_clear, false);

  function draw_start(e) {
    clickFlg = true;
    e.preventDefault();
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#333";
    ctx.lineCap = "round";
    ctx.moveTo(e.offsetX, e.offsetY);
    ctx.stroke();
  }

  function draw_move(e) {
    if (clickFlg == false) return false;
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
  }

  function draw_end(e) {
    clickFlg = false;
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
  }

  function click_clear() {
    ctx.clearRect(0, 0, 800, 200);
  }

Canvasに描いた文字や絵を画像にする場合はこちら

スポンサーリンク
おすすめの記事