Help us understand the problem. What is going on with this article?

初めてのJavaScript~ペンの色・太さが変更できるお絵かきアプリを作ったよ~

Webアプリを作りたいなと思いながらなんとなーく先延ばしにしてたところ
初心者向けのJavaScript,HTML,CSSを使ったワークショップを見つけたので参加してみました。
その時作ったお絵かきアプリに機能を追加してペンの太さ・ペンの色の変更・画面の全消しができるようにしてます.

動作環境

あんまりよくわかってないけどCodeSandboxにsign inしてVanillaを使って作りました笑

おそらく…
・CodeSandbox
・Vanilla
・HTML
・JavaScript
・CSS
があればできるんだと思います.
違ってたらすみません.

やること

1.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>

おそらくこんな感じになるかと…
スクリーンショット 2019-12-14 17.25.34.png

これでは動かないのでJavaScriptさんに動かしてもらいましょう

2.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をいじってください

3.CSSでも書きますか

今回はこだわりがなかったのでとりあえず実装しました程度です

/*お絵かきするところからはみ出た部分を隠してみた*/
body {
  overflow: hidden;
}

完成

スクリーンショット 2019-12-14 17.34.16.png

できました!
一応完成したやつのURL載せときます
パソコンでもスマホでも動くようにしました.
Androidで動くかはわかんないです
完成版

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away