Webアプリを作りたいなと思いながらなんとなーく先延ばしにしてたところ
初心者向けのJavaScript，HTML，CSSを使ったワークショップを見つけたので参加してみました。
その時作ったお絵かきアプリに機能を追加してペンの太さ・ペンの色の変更・画面の全消しができるようにしてます．
動作環境
あんまりよくわかってないけどCodeSandboxにsign inしてVanillaを使って作りました笑
おそらく…
・CodeSandbox
・Vanilla
・HTML
・JavaScript
・CSS
があればできるんだと思います．
違ってたらすみません．
やること
１．HTMLで部品を作ります
今回はお絵かきする部分とボタンを作成しました．
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<!--お絵かきする画面を消すボタン-->
<div>
<button id="pen-ss">極細</button>
<button id="pen-s">細</button>
<button id="pen-m">中</button>
<button id="pen-l">太</button>
<button id="pen-ll">極太</button>
</div>
<!--お絵かきするところ-->
<div>
<canvas
id="draw-area"
width="400px"
height="400px"
style="border: 1px solid #000000"
>
</canvas>
</div>
<!--色を変えるボタン-->
<div>
<button id="color-red">赤</button>
<button id="color-blue">青</button>
<button id="color-green">緑</button>
<button id="color-black">黒</button>
<button id="eraser">消しゴム</button>
<button id="clear-button">全消し</button>
</div>
<script src="src/index.js"></script>
</body>
</html>
おそらくこんな感じになるかと…
これでは動かないのでJavaScriptさんに動かしてもらいましょう
２．JavaScriptの登場
特にどうってこともないのでコード載せます
import "./styles.css";
const canvas = document.querySelector("#draw-area");
const context = canvas.getContext("2d");
canvas.addEventListener("mousemove", event => {
draw(event.layerX, event.layerY);
});
canvas.addEventListener("touchmove", event => {
draw(event.layerX, event.layerY);
});
//パソコンでクリックしてる間だけ描けるようにした機能
canvas.addEventListener("mousedown", () => {
context.beginPath();
isDrag = true;
});
canvas.addEventListener("mouseup", () => {
context.closePath();
isDrag = false;
});
//スマホで描けるようにする機能
canvas.addEventListener("touchstart", () => {
context.beginPath();
isDrag = true;
});
canvas.addEventListener("touchend", () => {
context.closePath();
isDrag = false;
});
//お絵かきするところをきれいにする機能
const clearButton = document.querySelector("#clear-button");
clearButton.addEventListener("click", () => {
context.clearRect(0, 0, canvas.width, canvas.height);
});
//ペンの色を変える機能
const colorRed = document.querySelector("#color-red");
colorRed.addEventListener("click", () => {
context.strokeStyle = "red";
});
const colorBlue = document.querySelector("#color-blue");
colorBlue.addEventListener("click", () => {
context.strokeStyle = "blue";
});
const colorGreen = document.querySelector("#color-green");
colorGreen.addEventListener("click", () => {
context.strokeStyle = "green";
});
const colorBlack = document.querySelector("#color-black");
colorBlack.addEventListener("click", () => {
context.strokeStyle = "black";
});
//消しゴムの機能
const eraser = document.querySelector("#eraser");
eraser.addEventListener("click", () => {
context.strokeStyle = "white";
});
//ぺんの太さを変える機能
const penSS = document.querySelector("#pen-ss");
penSS.addEventListener("click", () => {
context.lineWidth = 1;
});
const penS = document.querySelector("#pen-s");
penS.addEventListener("click", () => {
context.lineWidth = 5;
});
const penM = document.querySelector("#pen-m");
penM.addEventListener("click", () => {
context.lineWidth = 10;
});
const penL = document.querySelector("#pen-l");
penL.addEventListener("click", () => {
context.lineWidth = 15;
});
const penLL = document.querySelector("#pen-ll");
penLL.addEventListener("click", () => {
context.lineWidth = 20;
});
let isDrag = false;
//線をかく機能
function draw(x, y) {
if (!isDrag) {
return;
}
context.lineTo(x, y);
context.stroke();
}
ここまでできればとりあえず動きます
デザインにも凝りたいって方はCSSをいじってください
３．CSSでも書きますか
今回はこだわりがなかったのでとりあえず実装しました程度です
/*お絵かきするところからはみ出た部分を隠してみた*/
body {
overflow: hidden;
}
完成
できました！
一応完成したやつのURL載せときます
パソコンでもスマホでも動くようにしました．
Androidで動くかはわかんないです
完成版