どうも、ソエです。

今回は、HTMLのCanvasをやったのに一つも書いてなかった気がしたので、Canvasについての記事を書いてみました。
友達と絵を描く話をしていたので、ちょうどお絵かきできるものにしようかな、と思いこの記事に。

役に立つ、というより友達と遊ぶためのものかもしれませんが、見てみてください。

では、どうぞ。

サンプル

コード

CSSは関係ないので書きません。

HTML

<label>色<input id=”color” type=”color”></label>
<label>サイズ<input id=”weight” min=”1″ max=”30″ type=”number”></label>

<button id=”clear”>クリア</button>

<canvas id=”canvas” width=”500″ height=”400″></canvas>

JavaScript

// 変数へ代入
let ctx;
let x = 0;
let y = 0;
let click = false;
let clear = document.querySelector(‘#clear’);
let color = document.querySelector(‘#color’);
let weight = document.querySelector(‘#weight’);
window.addEventListener(‘load’, () => {
init();
});
function init() {
let canvas = document.querySelector(“#canvas”);
if (!canvas || !canvas.getContext) {
return false;
};
ctx = canvas.getContext(“2d”);
// マウスイベント登録
canvas.addEventListener(‘mousemove’, onMove);
canvas.addEventListener(‘mousedown’, onDown);
canvas.addEventListener(‘mouseup’, onUp);
clear.addEventListener(‘click’, onClear);
color.addEventListener(‘change’, onColor);
weight.addEventListener(‘change’, onWeight);
}
//関数を作る
function onMove(e) {
if (click) {
ctx.beginPath();
ctx.moveTo(x, y);
let rect = e.target.getBoundingClientRect();
x = e.clientX – rect.left;
y = e.clientY – rect.top;
ctx.lineTo(x, y);
ctx.stroke();
}
};
function onDown(e) {
click = true;
let rect = e.target.getBoundingClientRect();
x = e.clientX – rect.left;
y = e.clientY – rect.top;
};
function onUp(e) {
click = false;
};
function onClear() {
ctx.clearRect(0, 0, 640, 480);
}
function onColor() {
ctx.strokeStyle = this.value;
}
function onWeight() {
ctx.lineWidth = this.value;
}

終わりに

いかがでしたか?

ちょっとした、自分だけでのお絵かきサイトができて、友達と楽しめそうじゃないですか?
一度、作ってみてはいかがでしょうか。

では、ご閲覧ありがとうございました。

ご閲覧ありがとうございました!

プロフィール

ソエ

愛知県産のインドア。趣味はゲームとアニメ鑑賞。高校三年生にWebに興味を持ち専門学校へ入学。写真は愛犬です。

検索

ホーム/ JavaScript/

Canvasで、お絵かきできるようにする。