Day-22 드로잉 앱

6674 단어 javascriptday2250projects50days
안녕 여러분,

프로젝트에 들어가기 전에 나에 대한 약간의 소개:

저는 사비야 타바숨입니다. 저는 CSE 전공으로 B.Tech를 마쳤습니다. 저는 현재 React를 배우고 있으며 최근에 50 Projects 50 Days 챌린지를 시작했습니다. 저와 협업할 질문/아이디어가 있으면 제 소셜 미디어 핸들에서 저와 연결할 수 있습니다.

드로잉 앱 프로젝트로 찾아오겠습니다. 함께 뛰어봅시다!!


우리 프로젝트의 결과물에 대한 간략한 설명:


위의 이미지에서 그릴 캔버스가 있다는 아이디어를 얻을 수 있습니다. 두께를 늘리거나 줄이는 도구 상자, 획의 색상을 변경하는 색상 입력 및 캔버스를 지우는 지우기 버튼.

사용 중인 기술 스택: HTML, CSS, JS

📌HTML 코드:

<body>
   <canvas class="canvas" id="canvas" width="600" 
   height="500"></canvas>
  <div class="toolbox" id="toolbox">
     <button class="decrement">-</button>
     <span id="size" class="size">10</span>
     <button class="increment">+</button>
     <input type="color" class="color" />
     <button class="clear" id="clear">X</button>
  </div>
</body>

HTML 코드에 대한 자세한 설명:
  • 출력에서 캔버스가 필요하다는 명확한 아이디어를 얻을 수 있습니다.
    캔버스에 너비 및 높이 속성을 추가합니다.
  • 도구 상자의 경우 호출된 도구 상자를 생성합니다.
    감소 및 증가 버튼이 있습니다. 또한
    두께를 나타내는 크기 등급에 대한 스팬 태그
    선/획.
  • 캔버스를 지우기 위해 clear 클래스가 포함된 버튼을 추가합니다.

    • 📌CSS 코드:

       @import url("https://fonts.googleapis.com/css2? 
   family=Roboto:wght@400;700&display=swap");
 * {
      box-sizing: border-box;
   }
 body {
      background-color: #f5f5f5;
      font-family: "Roboto", sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
   }
 canvas {
      border: 4px solid steelblue;
   }
 .toolbox {
     background-color: rgb(62, 138, 201);
     width: 606px;
     height: 60px;
     display: flex;
     border: 2px solid rgb(25, 141, 236);
     padding: 10px 20px;
     }
  .toolbox > * {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin: 4px;
     padding: 10px;
     font-size: 1.8rem;
     background-color: #fff;
     border: 0;
     cursor: pointer;
     width: 40px;
     height: 39px;
     margin-top: -2px;
  }
 .toolbox > *:last-child {
     margin-left: auto;
     background-color: red;
     color: white;
   }
    CSS 코드에 대한 자세한 설명:
  • 요소의 가운데 맞춤: 다음과 같은 속성을 추가합니다.
  • display:flex - 항목 모음을 하나에 배치합니다.
    방향 또는 다른.

  • align-items:center - 항목을 중앙에 맞춥니다.

  • justify-content:center - 유연한 정렬
    컨테이너의 항목을 중앙에 배치합니다.

  • height:100vh - 페이지의 전체 높이

  • overflow: hidden - 이 속성은 페이지를
    스크롤할 수 없습니다.

  • 캔버스 스타일 지정:
  • 테두리 속성을 추가합니다.

  • 도구 상자 스타일 지정:
  • 도구 상자의 너비와 높이를 지정합니다.
  • 배경색 및 패딩, 여백 추가
    당신의 소원으로 속성.

  • .toolbox > * {}는 다음을 의미합니다.
  • 부모 도구 상자 클래스의 자식은 다음에 영향을 받습니다.
    이 괄호 열에 쓰는 스타일입니다.

  • .toolbox > *:last-child{}는 다음을 의미합니다.
  • 마지막 자식은 우리가 작성한 스타일에만 적용됩니다.
    이 괄호 안에.

  • Atlast, 응답성을 위해 몇 가지 미디어 쿼리를 추가할 수 있습니다 😊

    • 📌JS 코드:
      const canvas = document.querySelector(".canvas");
  const incrementBtn = document.querySelector(".increment");
  const decrementBtn = document.querySelector(".decrement");
  const colorEl = document.querySelector(".color");
  const clearEl = document.querySelector(".clear");
  const sizeEl = document.querySelector(".size");

  let size = 10;
  let isPressed = false;
  colorEl.value = "black";
  let color = colorEl.value;
  let x;
  let y;

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

  canvas.addEventListener("mousedown", (e) => {
          isPressed = true;
          x = e.offsetX;
          y = e.offsetY;
  });

  canvas.addEventListener("mouseup", (e) => {
         isPressed = false;
         x = undefined;
         y = undefined;
  });

 canvas.addEventListener("mousemove", (e) => {
        if (isPressed) {
           const x2 = e.offsetX;
           const y2 = e.offsetY;

           drawCircle(x2, y2);
           drawLine(x, y, x2, y2);
           x = x2;
           y = y2;
       }
 });

 function drawCircle(x, y) {
          ctx.beginPath();
          ctx.arc(x, y, size, 0, Math.PI * 2);
          ctx.fillStyle = color;
          ctx.fill();
  }

 function drawLine(x1, y1, x2, y2) {
          ctx.beginPath();
          ctx.moveTo(x1, y1);
          ctx.lineTo(x2, y2);
          ctx.strokeStyle = color;
          ctx.lineWidth = size * 2;
          ctx.stroke();
  }

 function updateSizeOnScreen() {
         sizeEl.innerText = size;
  }

 incrementBtn.addEventListener("click", () => {
         size += 5;
         if (size > 50) {
             size = 50;
          }
          updateSizeOnScreen();
 });

  decrementBtn.addEventListener("click", () => {
         size -= 5;
         if (size < 5) {
             size = 5;
          }
         updateSizeOnScreen();
   });

  colorEl.addEventListener("change", (e) => {
         color = e.target.value;
  });

  clearEl.addEventListener("click", () => {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
  });
    JS 코드에 대한 자세한 설명:
  • 먼저 DOM을 만들고 있는 변수를 만듭니다.
    변화.
  • 캔버스에는 mousemove 함수가 있습니다.
    마우스다운과 마우스업
  • 우리는 drawCircle, drawLine과 같은 기능을 가지고 있습니다.
  • 이 기능은 그림에 대한 아이디어를 제공하는 데 도움이 됩니다.
    집단.
  • addEventListener를 사용하여 몇 가지 이벤트를 등록해야 합니다.
    증가, 감소, 크기, 색상 및 지우기 버튼을 클릭/변경과 같은 일부 이벤트를 수행할 때 특정 작업이 수행되도록 합니다.

    • 마지막으로 출력의 라이브 데모는 다음과 같습니다.




    깃허브 링크: 사비야타바숨 / Day-22-그림 그리기 앱 22일차 CodeSandbox로 생성 Day-22-그림 그리기 앱 CodeSandbox로 생성 GitHub에서 보기



    에서 연결해 주세요



    프로젝트가 마음에 드셨기를 바랍니다!!

    오늘의 동기부여:



        And I won't let you get me down
    I'll keep gettin' up when I hit the ground
    Oh, never give up, no, never give up no, no, oh
    I won't let you get me down
    I'll keep gettin' up when I hit the ground
    Oh, NEVER GIVE UP, no, never give up no, no, oh
    TabView 표시기 사용자 정의
    JavaScript 인터뷰 질문 #48: 개만한 고양이

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage