웹 페인트 애플리케이션 구축

어릴 때 사용했던 것을 만드는 것이 얼마나 신나는 일인가요?

여러분 대부분이 Microsoft 그림판을 사용했다고 확신합니다. 산과 오두막, 한 그루의 나무, 두 마리의 새가 날아가는 풍경을 그리며 우리 모두 피카소가 된 기분이 아니었나요? 우리는 했다!

이 프로젝트는 그것과 비슷하거나 적어도 아이디어는 비슷합니다. 웹 개발의 완전 초심자라도 이것을 만들 수 있습니다. 이 자습서는 HTML, CSS 또는 JavaScript가 아닌 이 프로젝트를 빌드하는 데 중점을 둡니다. <canvas> 자습서도 아닙니다.

전제 조건

HTML 및 CSS에 대한 기본 이해

DOM 조작

무엇을 만들 것인가?

HTML5, CSS 및 JavaScript를 사용하여 구축된 웹 애플리케이션입니다. 이 튜토리얼은 초보자를 위해 만들어졌습니다. 선을 그리고, 획의 색상 및 크기를 변경하고, 지우고 사용자 지정 색상을 얻을 수도 있습니다.

그것에 뛰어 들자! ⚡

캔버스 소개

HTML5는 웹 페이지에서 스크립팅을 통해 그래픽을 그리는 데 사용되는 요소<canvas> </canvas>를 제공합니다. 기본 크기는 300px × 150px입니다. JavaScript 컨텍스트 개체를 사용하여 캔버스에 그래픽을 그립니다. 속성, ID, 클래스 등을 가질 수 있습니다.

Think of <canvas> as an actual canvas, JavaScript context object as paints & yourself as an artist 🎨.

프로젝트를 시작하기 전에 직접 시도해 볼 수 있습니다. Live project

<canvas id="canvas">Fallback text</canvas>

참고: 캔버스는 다음 브라우저에서 지원됩니다.

크롬 102 및 103

파이어폭스 101 및 102

엣지 101 및 102

사파리 14 및 15

💻 드디어 코딩 부분에 들어갈 시간입니다.
응용 프로그램의 UI를 만드는 시간을 절약하기 위해 다운로드할 수 있는 시작 파일을 만들었습니다here.

Starter Code: GitHub Repo Link

지우개

캔버스를 특정 색상으로 선택하면 캔버스와 같은 색상의 브러시를 만들어 지우개를 만들 수 있습니다. 이것은 작동하지만 효율적이지 않습니다. 지우개의 목적은 지정된 영역/지역에서 픽셀을 제거하는 것이며 이것이 우리가 할 일입니다.
Context API의 globalCompositeOperation 속성을 사용하여 의도한 작업을 수행할 수 있습니다.

const erase = () => (ctx.globalCompositeOperation = "destination-out");

브러시 크기 드롭다운 전환

function sizeList() {
  document.querySelector(".size-list").classList.toggle("show-list");
}

브러시 크기 설정

선택한 크기를 브러시 크기로 설정하려면 목록의 각 크기에 이벤트 리스너를 추가합니다. 사용자가 지정된 크기를 클릭하면 브러시 두께를 저장하는 전역 변수의 값을 변경합니다.

Make sure to call the brushSize() function on dropdown of brush size.

function brushSize() {
  var brushSet = document.getElementsByClassName("size");
  Array.prototype.forEach.call(brushSet, function (element) {
    element.addEventListener("click", function () {
      brushthickness = element.getAttribute("style").substr(11, 2);
    });
  });
}

색상 설정

색상을 변경하면 사용자가 선택한 색상을 기억할 수 없습니다. 그렇기 때문에 MS 그림판과 유사하게 상자에 활성 색상을 표시하면 더 나은 사용자 경험이 될 것입니다.
상자의 배경을 변경하고 활성 색상을 저장하는 전역 변수에 스트로크 값을 설정하기만 하면 되기 때문에 이것은 쉽습니다. 이 변수를 조작하는 방법과 위치를 살펴보겠습니다.

function setActiveColor() {
  document.querySelector(".color-btn div").style.backgroundColor = color;
  ctx.strokeStyle = color;
  ctx.globalCompositeOperation = "source-over";
}

색상 팔레트는 navbar의 작은 블록에 의해 생성되며 이를 선택하고 각 블록에 클릭 이벤트 리스너를 추가해야 하는 획 색상으로 설정합니다. 블록이 클릭되면 스타일의 속성 값으로 전역 색상 변수를 설정합니다. 완료되면 setActiveColor() 함수를 호출할 수 있습니다.

function setColor() {
  var palette = document.getElementsByClassName("color");
  Array.prototype.forEach.call(palette, function (element) {
    element.addEventListener("click", function () {
      color = element.getAttribute("style").split("--set-color:")[1];
      setActiveColor();
    });
  });
}

이 항목에서 마지막으로 수행해야 할 작업은 색상 선택기가 작동하도록 하는 것입니다. 즉, 값을 전역 변수로 설정하는 것입니다.

function colorPick() {
  color = document.getElementById("color-picker").value;
  setActiveColor();
}

그리기 기능

🥳이 응용 프로그램의 핵심은 마침내 여기에 있습니다. 이제 캔버스에 요소를 그리는 기능을 만드는 데 집중할 것입니다. 캔버스에 그리기에는 따라야 할 전용 단계가 있습니다.

그리기 경로를 시작합니다.

마우스 이동이 발생할 때 선 위치를 계속 업데이트합니다.

시작 위치에서 끝 위치까지 선을 만듭니다.

길을 막습니다.

function draw(e) {
  if (e.buttons !== 1) return; // if mouse is not clicked, do not go further

  ctx.beginPath(); // begin the drawing path
  ctx.lineWidth = brushthickness; // width of line
  ctx.lineCap = "round"; // rounded end cap
  ctx.strokeStyle = color; // hex color of line
  ctx.moveTo(pos.x, pos.y); // from position
  setPosition(e);
  ctx.lineTo(pos.x, pos.y); // to position
  ctx.closePath();
  ctx.stroke(); // draw it!
}

이것으로 나만의 웹 페인트 응용 프로그램이 준비되었습니다. 친구들과 공유하고 즐기십시오!


당신이 뭔가를 배웠기를 바랍니다! 계속 만들어보세요!