HTMLで場面クリックでマウスでペイントするパレットが表示され、お絵かきが出来ます。ただし、ブラシのサイズや色が変更できない低機能です。
<!-- index.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>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: dimgray;
}
#mainbox {
margin: auto;
height: 800px;
width: 800px;
text-align: center;
}
canvas {
border: 1px solid dimgray;
background-color: whitesmoke;
}
h1 {
color: whitesmoke;
font-size: 20px;
}
</style>
</head>
<body>
<div id="mainbox">
<h1>Rough Brush Painting</h1>
<canvas id="drawingCanvas"
width="800" height="600"></canvas>
</div>
<script>
const canvas =
document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
// ブラシの設定
ctx.lineWidth = 20; // ブラシの太さ
ctx.lineCap = 'round'; // ブラシの形状
ctx.strokeStyle = 'gray'; // ブラシの色
// 描画を開始する
canvas.addEventListener('mousedown', () => {
isDrawing = true;
ctx.beginPath(); // 新しいパスを開始
});
// 描画を終了する
canvas.addEventListener('mouseup', () => {
isDrawing = false;
});
// マウスが動いている間、描画する
canvas.addEventListener('mousemove', (event) => {
if (isDrawing) {
// 現在の位置までの線を描画
ctx.lineTo(event.offsetX, event.offsetY);
ctx.stroke(); // パスを描画
}
});
// マウスがキャンバスから出たとき、描画を停止する
canvas.addEventListener('mouseleave', () => {
isDrawing = false;
});
</script>
</body>
</html>
<!-- index.html -->
実行すると表示される専用のパレット。
あとはマウスで描くだけです。先端処理はコレが限界みたいです。
Undoが出来ないのが辛いですが、お絵かきは出来ます。
※普段はペンタブレットを使っているので、マウスでの描画は苦手です。ちなみにペンタブレットには未対応です。今後の課題ですね。
