簡単なお絵描きアプリの作り方【JavaScript】

2022年2月23日 18:38

※自分用の備忘録です。

JavaScriptで簡単なお絵描きアプリを自作する方法です。

全体のコード

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>drawing</title>
  <style>
    canvas {
      border: solid 1px #333;
    }
  </style>
</head>

<body>
  <canvas id="draw-area" width="400" height="400">
  </canvas>
  <div>
    <button id="clearBtn">消す</button>
  </div>

  <script>
    const canvas = document.getElementById('draw-area');
    const ctx = canvas.getContext('2d');
    const clearBtn = document.getElementById('clearBtn');
    const mouse = { x: null, y: null };

    function clear() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    function onPaint() {
      ctx.lineTo(mouse.x, mouse.y);
      ctx.stroke();
    }

    canvas.addEventListener('mousemove', function (e) {
      mouse.x = e.pageX - this.offsetLeft;
      mouse.y = e.pageY - this.offsetTop;
      console.log(mouse)
    });

    canvas.addEventListener('mousedown', function (e) {
      console.log('mousedown')
      ctx.beginPath();
      ctx.moveTo(mouse.x, mouse.y);
      ctx.lineWidth = 5;
      ctx.strokeStyle = '#333';

      canvas.addEventListener('mousemove', onPaint)
    });

    canvas.addEventListener('mouseup', function () {
      canvas.removeEventListener('mousemove', onPaint)
    });

    clearBtn.addEventListener('click', clear);
  </script>
</body>

</html>

HTML部分

  <canvas id="draw-area" width="400" height="400">
  </canvas>
  <div>
    <button id="clearBtn">消す</button>
  </div>

canvasのwidthとheight

canvasのwidthとheightは初期値があり、横300px高さ150pxとなっています。

サイズを指定する際にstyleで指定をするとその初期値の割合で引き延ばされ思ったように扱えなくたってしまうので、canvasタグ内に直接widthとheightを指定しましょう。

CSS部分

    canvas {
      border: solid 1px #333;
    }

キャンバスは何も指定をしないと境界線が見えないので、borderで枠線を描いています。

JavaScript部分

    const canvas = document.getElementById('draw-area');
    const ctx = canvas.getContext('2d');
    const clearBtn = document.getElementById('clearBtn');
    const mouse = { x: null, y: null };

    function clear() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    function onPaint() {
      ctx.lineTo(mouse.x, mouse.y);
      ctx.stroke();
    }

    canvas.addEventListener('mousemove', function (e) {
      mouse.x = e.pageX - this.offsetLeft;
      mouse.y = e.pageY - this.offsetTop;
    });

    canvas.addEventListener('mousedown', function (e) {
      ctx.beginPath();
      ctx.moveTo(mouse.x, mouse.y);
      ctx.lineWidth = 5;
      ctx.strokeStyle = '#333';

      canvas.addEventListener('mousemove', onPaint)
    });

    canvas.addEventListener('mouseup', function () {
      canvas.removeEventListener('mousemove', onPaint)
    });

    clearBtn.addEventListener('click', clear);

座標の取得

マウスの座標の取得方法は、「page」を使う以外に「client」を使う方法があります。

マウスのドラッグ操作の記述

マウスでドラッグをする動きは、「addEventListener」の「mousedown」内に「addEventListener」の「mousedown」の記述をします。

続けて「removeEventListener」で「mouseup」をした時に「mousemove」で指定した動きを取り除きます。

※完成形ではないので実用にはお気をつけください。

お絵描きアプリサンプル
リンク

ソースコード
GitHub