그림 (2)

2. Painting Board

2.0 painting Lines

• 좀바꿧음 . 맨처음moveTo(0,0) or 주석풀면 으로하면 선으로 그려짐

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d"); // context : brush임
canvas.width = 800;
canvas.height = 800;
let x = 0;
let y = 0;

ctx.lineWidth = 2;

const colors = [
  "#ffeaa7",
  "#e84393",
  "#fab1a0",
  "#ff7675",
  "#fd79a8",
  "#e17055",
  "#d63031",
];

function onMousemove(event) {
  ctx.beginPath();
  //ctx.moveTo(x, y);
  ctx.moveTo(event.offsetX - 2, event.offsetY - 2);
  const color = colors[Math.floor(Math.random() * colors.length)];
  ctx.strokeStyle = color;
  ctx.lineTo(event.offsetX, event.offsetY);
  ctx.stroke();
}

function onClick(event) {
  x = event.offsetX;
  y = event.offsetY;
}

canvas.addEventListener("click", onClick);
canvas.addEventListener("mousemove", onMousemove);

2.1 클릭해있을때 그리기

function onMove(event) {
  if (isPainting) {
    ctx.lineTo(event.offsetX, event.offsetY);
    ctx.stroke();
    return;
  }
  ctx.beginPath();   <<<    <<<   <<<   <<<   <<<중 요   <<<   <<<
  ctx.moveTo(event.offsetX, event.offsetY);
}

function startpainting(event) {
  isPainting = true;
}

function cancelPainting(event) {
  isPainting = false;
}

canvas.addEventListener("mousemove", onMove);
canvas.addEventListener("mousedown", startpainting);
// 화면밖에 나가서 마우스떼도 false되도록
canvas.addEventListener("mouseleave", cancelPainting);
canvas.addEventListener("mouseup", cancelPainting);
//document.addEventListener("mouseup", onMouseUp);

2.2 선굵기 조정

<canvas></canvas>
<input id="line-width" type="range" min="1", max="10" value="5" step="0.5"/>

• js 에 function추가

const lineWidth = document.getElementById("line-width");
~~
ctx.lineWidth = lineWidth.value;

~~  
function onLineWidthChange(event) {
  ctx.lineWidth = event.target.value;
}

lineWidth.addEventListener("change", onLineWidthChange);

2.3 paint color

• html추가 

<input type="color" id="color">

• js

const color = document.getElementById("color");

function onColorChange(event) {
  ctx.strokeStyle = event.target.value; // 선색상
  ctx.fillStyle = event.target.value; // 채우기
}

color.addEventListener("change", onColorChange);

2.3(2) 색상 선택권 주기

• html >>> data- 속성 : -뒤에 원하는이름으로 속성생성가능함 >> 이후 dataset 속성으로 value겟 가능함

• html에 추가

<input type="color" id="color">    
    <div class="color-option" style="background-color: #fc5c65;" data-color="#fc5c65"></div>
    <div class="color-option" style="background-color: #eb3b5a;" data-color="#eb3b5a"></div>
    <div class="color-option" style="background-color: #fd9644;" data-color="#fd9644"></div>
    <div class="color-option" style="background-color: #fa8231;" data-color="#fa8231"></div>
    <div class="color-option" style="background-color: #fed330;" data-color="#fed330"></div>
    <div class="color-option" style="background-color: #f7b731;" data-color="#f7b731"></div>
    <div class="color-option" style="background-color: #26de81;" data-color="#26de81"></div>
    <div class="color-option" style="background-color: #20bf6b;" data-color="#20bf6b"></div>
    <div class="color-option" style="background-color: #2bcbba;" data-color="#2bcbba"></div>
    <div class="color-option" style="background-color: #0fb9b1;" data-color="#0fb9b1"></div>
    <div class="color-option" style="background-color: #45aaf2;" data-color="#45aaf2"></div>
    <div class="color-option" style="background-color: #4b7bec;" data-color="#4b7bec"></div>
    <div class="color-option" style="background-color: #a55eea;" data-color="#a55eea"></div>
    <div class="color-option" style="background-color: #778ca3;" data-color="#778ca3"></div>
    <div class="color-option" style="background-color: #4b6584;" data-color="#4b6584"></div>
    
    
    ==============
    css
    .color-option {
    width: 50px;
    height: 50px;
    cursor: pointer;
    
}

• js 에 추가 (Array.from 사용함)

const colorOptions = Array.from(
  document.getElementsByClassName("color-option")
);

function onColorClick(event) {
  const colorValue = event.target.dataset.color;
  ctx.strokeStyle = colorValue; // 선색상
  ctx.fillStyle = colorValue; // 채우기
  color.value = colorValue;
}

colorOptions.forEach((color) => color.addEventListener("click", onColorClick));

2.5 filling Mode

• 모드버튼 클릭후 canvas 클릭하면 색상전체 채워지도록
• html 추가

<button id="mode-btn">Fill</button>

• js 추가

const modeBtn = document.getElementById("mode-btn");
let isFilling = false;

function onModeClick(event) {
  if (isFilling) {
    isFilling = false;
    modeBtn.innerText = "Fill";
  } else {
    isFilling = true;
    modeBtn.innerText = "Draw";
  }
}

function onCanvasClick(event) {
  if (isFilling) {
    ctx.fillRect(0, 0, 800, 800);
  }
}

canvas.addEventListener("click", onCanvasClick);
modeBtn.addEventListener("click", onModeClick);

2.6 Eraser

• 전체 지우기

html추가
<button id="destroy-btn">Destroy</button>

============
const destroyBtn = document.getElementById("destroy-btn");

function onDestroyClick() {
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
}

destroyBtn.addEventListener("click", onDestroyClick);

• 선으로 지우기

<button id="eraser-btn">Erase</button>
==============================
const eraserBtn = document.getElementById("eraser-btn");

function onEraserClick() {
  ctx.strokeStyle = "white";
  // 다시 draw모드로
  isFilling = false;
  modeBtn.innerText = "Fill";
}

eraserBtn.addEventListener("click", onEraserClick);