JavaScript: ペイントツールの作り方

JavaScriptで簡易ペイントツールを作ってみました。 サンプルコードも掲載していますのでご自由にアレンジして使ってください。

動作サンプル

ペイントツール概要

  • 上にあるセレクトボックスで描画色を選択
  • mousedownで描画開始
  • mousemoveで描画
  • mouseupで描画終了

htmlファイル

セレクトボックスとキャンバスのタグを記述しています。
セレクトボックスは、行ごとに背景色を設定するようにしています。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ペイントツール</title>

<script type="text/javascript" src="sample01.js"></script>

<style>
    canvas {
        background-color: green;
        border: solid 5px brown;
    } 
</style>
</head>

<body>

<!-- 色選択用のセレクトボックス -->
<p>
色選択: 
<select id="color">
    <option value="white" style="background-color:white;color:black" selected>white</option>
    <option value="red" style="background-color:red;color:black">red</option>
    <option value="blue" style="background-color:blue;color:black">blue</option>
    <option value="yellow" style="background-color:yellow;color:black">yellow</option>
</select>
</p>

<!-- キャンバス -->
<canvas id="canvas" width="300" height="300"></canvas>

</body>
</html>

JavaScriptファイル

mousedown、mousemove、mouseupの3つの動きに応じてそれぞれ関数を作成しています。


// 描画用フラグ  true: 描画中   false: 描画中でない
var flgDraw = false;

// 座標
var gX = 0;
var gY = 0;

// 描画色
var gColor = 'white';

window.onload = function() {
    
    // イベント登録
    // マウス
    var canvas = document.getElementById('canvas');
   
    canvas.addEventListener('mousedown', startDraw, false);
    canvas.addEventListener('mousemove', Draw, false);
    canvas.addEventListener('mouseup', endDraw, false);
    
    // セレクトボックス
    var s = document.getElementById('color');
    s.addEventListener('change', changeColor, false);
    
} 
// セレクトボックス変更時に色を変更する
function changeColor(){

    gColor = document.getElementById('color').value;
    console.log(gColor);
    
}
// 描画開始
function startDraw(e){
    
    flgDraw = true;
    gX = e.offsetX;
    gY = e.offsetY;
    
}

// 描画
function Draw(e){
    
    if (flgDraw == true){
        
        // '2dコンテキスト'を取得
        var canvas = document.getElementById('canvas');
        var con = canvas.getContext('2d');

        var x = e.offsetX;
        var y = e.offsetY;

        // 線のスタイルを設定
        con.lineWidth = 3;
        // 色設定
        con.strokeStyle = gColor;

        // 描画開始
        con.beginPath();
        con.moveTo(gX, gY);
        con.lineTo(x, y);
        con.closePath();
        con.stroke();

        // 次の描画開始点
        gX = x;
        gY = y;
        
    }
}

// 描画終了
function endDraw(){
    
    flgDraw = false;
    
}

JavaScript入門