HTML5 Canvas 기초 (2)

캔버스라이브강좌

1
2
3
4
5
6
7
const ctx = document.querySelector(".canvas").getContext("2d");

const imgElem = new Image();
imgElem.src = "./dog.jpg";
imgElem.addEventListener("load", () => {
  ctx.drawImage(imgElem, 50, 50, 200, 200);
});

  • drawImage함수는 세 가지 패턴으로 나뉘고 아래와 같다
1
2
3
4
5
6
7
void ctx.drawImage(image, dx, dy);
// 이미지 객체를 캔버스 내 x, y 좌표에 그림
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
// 이미지 객체를 캔버스 내 x, y 좌표에 dWidth * dHeight로 그림
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
// 이미지 객체를 (sx, sy) 좌표로부터 sWidth * sHeight만큼 크롭하여
// 캔버스 내 (x, y)에 dWidth * dHeight로 그림
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const canvas = document.querySelector(".canvas");
const ctx = canvas.getContext("2d");
const control = document.querySelector(".control");
let drawingMode = false;
let colorVal = "black";

function moveHandler(e) {
  if (!drawingMode) return;

  ctx.beginPath();
  ctx.arc(e.layerX, e.layerY, 10, 0, Math.PI * 2, false);
  ctx.fill();
}

function downHandler(e) {
  drawingMode = true;
}

function upHandler(e) {
  drawingMode = false;
}

function setColor(e) {
  colorVal = e.target.getAttribute("data-color");
  ctx.fillStyle = colorVal;
}

canvas.addEventListener("mousedown", downHandler);
canvas.addEventListener("mousemove", moveHandler);
canvas.addEventListener("mouseup", upHandler);
control.addEventListener("click", setColor);

  • 색상 버튼을 이용해 선 색상을 바꾸기
1
2
3
4
5
6
7
8
...
function createIamge() {
  const url = canvas.toDataURL("image/png"); // 이미지 타입을 정의하여 매개변수로
  const imgElem = new Image(); // 이미지 객체를 새로 생성하고
  imgElem.src = url; // 해당 url을 할당
  resultImage.appendChild(imgElem); // 자식으로 추가
}
...