HTMLで場面クリックでマウスでペイントするパレットが表示され、お絵かきが出来ます。前回の問題点（※）を最低限修正しました。
※先端の形状、ブラシサイズ、ブラシの色、背景を白。
Let's start JavaScript 45 HTMLにてマウスでペイント 2024/11/20
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>ラフなブラシ描画 V2</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial, sans-serif;
background-color: dimgray;
}
#canvas {
border: 1px solid #000;
margin-top: 0px;
background-color: white;
}
#controls {
margin-top: 10px;
}
h1 {
color: white;
font-size: 20px;
}
.white {
color: white;
}
#undoButton {
margin-left: 10px;
}
</style>
</head>
<body>
<h1>Rough Brush Painting V2</h1>
<canvas id="canvas"
width="800" height="600"></canvas>
<div id="controls">
<label for="colorPicker" class="white">color: </label>
<input type="color" id="colorPicker" value="black">
   
<label for="brushSize" class="white">size: </label>
<input type="range" id="brushSize"
min="1" max="50" value="5">
   
<button id="undoButton">Undo</button>
</div>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const colorPicker = document.getElementById('colorPicker');
const brushSize = document.getElementById('brushSize');
const undoButton = document.getElementById('undoButton');
let painting = false;
let brushColor = colorPicker.value;
let brushWidth = brushSize.value;
// Undo用にキャンバスの履歴を保存するスタック
const historyStack = [];
// 現在のキャンバスの状態を履歴に保存
function saveState() {
historyStack.push(canvas.toDataURL());
}
// historyStackから前の状態を取得し、
// その画像データを使用しキャンバスの状態を復元。
// new Image()とdrawImage()メソッドを使用。
function restoreState() {
if (historyStack.length > 0) {
const previousState = historyStack.pop();
const img = new Image();
img.src = previousState;
img.onload = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
};
}
}
// 開始位置
function startPosition(e) {
painting = true;
saveState();
draw(e);
}
// 終了位置
function finishedPosition() {
painting = false;
ctx.beginPath();
}
// 描画開始
function draw(e) {
if (!painting) return;
ctx.lineWidth = brushWidth;
ctx.lineCap = 'round';
ctx.strokeStyle = brushColor;
ctx.lineTo(e.clientX -
canvas.offsetLeft, e.clientY - canvas.offsetTop);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(e.clientX -
canvas.offsetLeft, e.clientY - canvas.offsetTop);
}
canvas.addEventListener('mousedown', startPosition);
canvas.addEventListener('mouseup', finishedPosition);
canvas.addEventListener('mousemove', draw);
// ブラシカラー変更
colorPicker.addEventListener('input', (e) => {
brushColor = e.target.value;
});
// ブラシサイズ変更
brushSize.addEventListener('input', (e) => {
brushWidth = e.target.value;
});
// キャンバスの状態を1つ前に戻します。
undoButton.addEventListener('click', restoreState);
</script>
</body>
</html>
<!-- index.html -->
先端処理を修正し、カラーとブラシサイズを変更可能にしました。Undoも出来ます。
消しゴム機能はありませんが白バックならば白で塗ることで対応出来ます。
※普段はペンタブレットを使っているので、マウスでの描画は苦手です。ちなみにペンタブレットには未対応です。今後の課題ですね。
