初心者向け！簡単に作れるお絵かきツール

CSS、JavaScript

今回はwebサイトの作成にはあまり役に立たないかも知れませんが、ちょっとおもしろいコードを作ってみましたので紹介したいと思います。

かなり簡単なコードで出来ているので、何かの約に立つかもしれませんので興味がある方は是非！

今回紹介するコードで出来ること

  1. 左クリックで描画のオン/オフ切り替え。
  2. 右クリックで線の色をランダムに変更。
  3. ダブルクリックでキャンバスをクリア。

See the Pen Oekaki_Script by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

HTMLとCSSのセットアップ

まず、基本的なHTMLとCSSを設定します。以下のコードをHTMLファイルに追加してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>キャンバス描画ツール</title>
    <style>
        #drawingArea {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: white;
        }

        #colorDisplay {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            border: 1px solid #ccc;
            background-color: blue; /* 初期色を設定 */
        }

        #instructions {
            position: fixed;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <canvas id="drawingArea"></canvas>

    <div id="colorDisplay"></div>

    <div id="instructions">
        <p>マウスの左クリックで線を描画がオン/オフできます。</p>
        <p>右クリックで線の色をランダムに変更します。</p>
        <p>ダブルクリックでキャンバスをクリアします。</p>
    </div>

    <script src="script.js"></script>
</body>
</html>

JavaScriptでの実装

次に、JavaScriptでキャンバスの描画機能を実装します。以下のコードをscript.jsファイルに追加してください。

// Canvas要素とコンテキストを取得
const canvas = document.getElementById('drawingArea');
const ctx = canvas.getContext('2d');

// Canvasのサイズをウィンドウサイズに合わせる
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 線の初期設定
ctx.lineWidth = 5;
ctx.strokeStyle = 'blue'; // 初期色は青

let isDrawing = true; // 描画中かどうかのフラグ

// 初期色を表示する要素に適用
const colorDisplay = document.getElementById('colorDisplay');
colorDisplay.style.backgroundColor = ctx.strokeStyle;

// 右クリックで線の色をランダムに変更
document.addEventListener('contextmenu', function(e) {
    e.preventDefault(); // デフォルトの右クリックメニューを無効化

    // 色をランダムに生成
    const randomColor = getRandomColor();
    ctx.strokeStyle = randomColor;

    // 色を表示する要素に適用
    colorDisplay.style.backgroundColor = randomColor;
});

// マウスの移動時に線を描画する関数
function drawLine(e) {
    if (!isDrawing) return; // 描画中でなければ何もしない

    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke();
}

// クリックで描画の一時停止・再開
document.addEventListener('click', function() {
    isDrawing = !isDrawing; // 描画中フラグを反転

    if (isDrawing) {
        // 再開時に新しいパスを開始
        ctx.beginPath();
        canvas.addEventListener('mousemove', drawLine);
    } else {
        // 停止時にmousemoveイベントリスナーを削除
        canvas.removeEventListener('mousemove', drawLine);
    }
});

// ダブルクリックでキャンバスをクリアする
document.addEventListener('dblclick', function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
});

// ランダムな色を生成する関数
function getRandomColor() {
    const randomColor = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
    return randomColor;
}

コードのポイント説明

キャンバスのサイズ設定: ウィンドウサイズに合わせてキャンバスのサイズを設定しています。これにより、画面全体に描画が可能になります。

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

描画の初期設定: 線の幅や初期色を設定しています。

ctx.lineWidth = 5;
ctx.strokeStyle = 'blue'; // 初期色は青

右クリックで色を変更: 右クリックイベントを監視し、ランダムな色を生成して線の色を変更します。

ctx.lineWidth = 5;
ctx.strokeStyle = 'blue'; // 初期色は青

マウスの動きに合わせて描画: マウスが動いたときに線を描く関数を設定しています。

document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    const randomColor = getRandomColor();
    ctx.strokeStyle = randomColor;
    colorDisplay.style.backgroundColor = randomColor;
});

マウスの動きに合わせて描画: マウスが動いたときに線を描く関数を設定しています。

function drawLine(e) {
    if (!isDrawing) return;
    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke();
}

クリックで描画のオン/オフ: クリックするたびに描画のオン/オフを切り替えます。

document.addEventListener('click', function() {
    isDrawing = !isDrawing;
    if (isDrawing) {
        ctx.beginPath();
        canvas.addEventListener('mousemove', drawLine);
    } else {
        canvas.removeEventListener('mousemove', drawLine);
    }
});

ダブルクリックでキャンバスをクリア: ダブルクリックするとキャンバスをクリアします。

document.addEventListener('dblclick', function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
});

まとめ

このキャンバス描画ツールを使えば、簡単にインタラクティブな描画体験を提供できます。クリックで描画のオン/オフを切り替え、右クリックでランダムな色を生成し、ダブルクリックでキャンバスをクリアする機能は、ユーザーに多様な操作体験を提供します。

See the Pen Oekaki_Script by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

タイトルとURLをコピーしました