Canvasで文字や絵を描く

2021年3月31日 2021年4月2日 8分19秒

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

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

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

1 サンプル
2 HTML
3 Javascript

サンプル

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

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に描いた文字や絵を画像にする場合はこちら