takataka430’s blog

.NET系を中心に勉強したことのまとめを書きます

WEBブラウザでお絵描きする方法を調べてみた

JavaScript

お絵描きする機能をWEBアプリケーションに実装したいと思い、JavaScriptならできるのでは？と思って調べてみました。
今回はその実装方法について書こうと思います。

実装のポイント

いくつか紹介します。

canvas要素の取得

//canvas要素の取得
const myCanvas = document.getElementById('canvas');

//canvas要素に平面の線を引くためのコンテクストを取得
const ctx = myCanvas.getContext('2d');

HTMLでcanvas要素を配置し、JavaScriptでcanvas要素とそのコンテクストを取得します。
コンテクストはcanvasに線を引くために必要です。

マウスが動いた時の座標を取得

//マウスを動かしたときに実行するイベントを定義
myCanvas.onmousemove = OnMouseMove;        
function OnMouseMove(e){
    Draw(e.offsetX, e.offsetY); //線を引く処理を実行する
}

1行目でマウスが動いた時に実行する関数を設定しています。
このイベントからcanvas要素内のマウスポインタの座標を取得できるので（e.offsetX, e.offsetY）、この値を用いて何らかの線を引く処理を実行します。

マウスのボタンを押している間だけ線を引く

上記2つだけだとマウスのポインタがcanvas要素上を移動している間はずっと線を引いてしまうので、以下のように状態を表す数値を設定します。

//線を引くために状態を持つ変数
//0：マウスをクリックしていない
//1：マウスをクリックしている
//2：マウスをクリックしてなおかつ動かしている
let lineStatus = 0;

//マウスのボタンを押したときのイベント
myCanvas.onmousedown = function(){
    lineStatus = 1;
}

//マウスのボタンを放したときのイベント
myCanvas.onmouseup = function(){
    lineStatus = 0;
}

これらを利用してマウスのボタンを押している間だけ線を引くようにしました。

全体のコード

以下のようにしました。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <meta charset="utf-8">
</head>
<body>
    <canvas id="canvas" width="500" height="300" style="border: solid 1px #000;box-sizing: border-box;"></canvas>
    <input type="button" value="clear" id="clear">
    <script>
        //線を引くために状態を持つ変数
        //0：マウスをクリックしていない
        //1：マウスをクリックしている
        //2：マウスをクリックしてなおかつ動かしている
        let lineStatus = 0;

        //canvas要素の取得
        const myCanvas = document.getElementById('canvas');

        //canvas要素に平面の線を引くためのコンテクストを取得
        const ctx = myCanvas.getContext('2d');
        
        //マウスのボタンを押したときのイベント
        myCanvas.onmousedown = function(){
            lineStatus = 1;
        }

        //マウスのボタンを放したときのイベント
        myCanvas.onmouseup = function(){
            lineStatus = 0;
        }

        //マウスを動かしたときに実行するイベントを定義
        myCanvas.onmousemove = OnMouseMove;        
        function OnMouseMove(e){
            Draw(e.offsetX, e.offsetY);
        }

        //線を引く
        function Draw(pos_x, pos_y){
            if(lineStatus == "1"){
                ctx.lineWidth = 5;        //線の太さ
                ctx.lineCap = "round"     //線の末端のスタイル
                ctx.beginPath();          //パスの開始
                ctx.moveTo(pos_x, pos_y); //始点
                lineStatus = 2;

            }else if(lineStatus == "2"){
                ctx.lineTo(pos_x, pos_y); //線を引く座標
                ctx.stroke();             //線を引く
            }
        }

        //以下は描いた線を消すためのもの
        const canvasWidth = myCanvas.width;
        const canvasHeight = myCanvas.height;
        const clear = document.getElementById('clear');
        clear.onclick = function(){
            ctx.clearRect(0,0,canvasWidth, canvasHeight)
        }

    </script>
</body>
</html>

これをWEBブラウザで表示すると以下のようにお絵描きをすることができます。

f:id:takataka430:20220318204931g:plain:w500

参考

developer.mozilla.org

developer.mozilla.org