JS-Do it! JS - #10일 (14,15)

14. 캔버스로 도형,텍스트,이미지 그리기

 

경로그리기의 시작과 끝을 나타내는 beginPath() , closePath()

경로를 만들겠다 알리는 beginPath()

경로그리기를 사용하려면 반드시 사용, 

하지만 시작위치=끝위치 같다면, closePath()는 생략 가능 ,그 외에는 붙여야 한다.

 

 

---

15. 캔버스로 그래픽 요소 다루기

 

나만의 드로잉 앱 만들기 

const canvas = document.querySelector("#canvas");
const toolbar = document.querySelector("#toolbar");

// 캔버스 너비와 높이. toolbar.offsetHeight는 툴바의 높이
canvas.width = window.innerWidth;
canvas.height = window.innerHeight - toolbar.offsetHeight;

// 캔버스 위치를 고려해 좌표 계산하기 위해
const canvasOffsetX = canvas.offsetLeft;   // 왼쪽에서 얼마나 떨어졌나
const canvasOffsetY = canvas.offsetTop;    // 위에서 얼마나 떨어졌나

const ctx = canvas.getContext("2d");

let isDrawing = false;     // 드로잉 상태인지 확인
let startX;       // 그리기 시작하는 좌표, x
let startY;       // 그리기 시작하는 좌표, y
let lineWidth = 2;    // 선 굵기 기본 값

// 선 색과 선 굵기를 선택했을 때
toolbar.addEventListener("change", e => {
  if (e.target.id === "stroke") {
    ctx.strokeStyle = e.target.value;
  }
  if (e.target.id === "lWidth") {
    lineWidth = e.target.value;
  }
});

// '지우기' 버튼 누르면 캔버스 지우기
toolbar.addEventListener("click", e => {
  if (e.target.id === "reset") {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }
});

canvas.addEventListener("mousedown" , e => {
  isDrawing = true;
  startX = e.clientX;
  startY = e.clientY;
});

canvas.addEventListener("mousemove", (e) => {
  if (!isDrawing) return;
  ctx.lineWidth = lineWidth;
  ctx.lineCap = "round";
  ctx.lineTo(e.clientX, e.clientY - canvasOffsetY);
  ctx.stroke();
});

canvas.addEventListener("mouseup", () => {
  isDrawing = false;
  ctx.beginPath();
});

 

GOOD 글씨 배경이미지로 채우기

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.font = "bold 300px sans-serif";
ctx.fillText("GOOD", 100, 320);

ctx.globalCompositeOperation="source-in";

let img=new Image();
img.onload=()=>{
    ctx.drawImage(img,0,0,canvas.width,canvas.height);
}
img.src="images/text-bg.jpg";