JavaScript- HTMLanvas 사용

안녕하세요. Wes Bos의 JavaScript30 경험에 대한 또 다른 흥미진진한 기사에 다시 오신 것을 환영합니다! 이것은 아마도 지금까지 이 코스에서 가장 재미있었을 것입니다! 이 도전을 시작한 후 나는 내 깊이에서 벗어나 있었기 때문에 스스로 알아내려고 노력하는 대신 Wes와 함께 코딩하기로 빨리 결정했습니다. 저는 이전에 Canvas를 사용해 본 적이 없으며 이해하지 못하는 구문이 많았습니다. 브라우저에서 나만의 Etch-a-Sketch 버전을 만들 수 있나요? 네, 그럴 수도 있겠지만, 그가 원하는 것이 무엇인지 완성품으로 보고 한발 물러섰습니다.

그래서 우리가 한 일은 무엇이었나요? 기본적으로 우리는 HTML5 Canvas에서 Etch-a-Sketch를 만들었습니다. 가장 큰 차이점은 색을 그릴 때 선의 크기와 선의 크기가 계속 변한다는 점이었습니다. 거짓말은 안 할게요...우리가 어떻게 이런 일을 할 수 있었는지 아직도 완전히 이해가 안 돼요. 하지만 나에게는 꽤 그럴듯한 생각이 있다.

위 사진을 보면 알 수 있듯이 실용성이 전혀 없더라도 매우 화려한 디자인이 완성되었습니다. 기본적으로 Canvas는 다소 "페인트"인 것처럼 보이지만 더 많은 용도로 사용됩니다. 앞으로 프로젝트에 언제 사용할지는 모르겠지만 전체적으로는 여전히 재미있는 작업이었습니다.

아 그리고 HSL에 대해 배우는 것도 재미있었어요! 그는 우리를 어머니 effing HSL로 데려가 색상과 색상에 대해 더 많이 배울 수 있게 했습니다. 색상 팔레트를 어떻게 망칠 수 있는지 알아보려면 이 사이트를 방문하는 것이 좋습니다. 이를 코드에서 직접 호출하고 페이지에 그릴 때마다 증가시켜 사용했습니다.

      let isDrawing = false;
      let lastX = 0;
      let lastY = 0;
      let hue = 0;
      let direction = true;

      function draw(e) {
        if (!isDrawing) return;
        console.log(e);
        ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.stroke();
        [lastX, lastY] = [e.offsetX, e.offsetY];
        hue++;
        if (hue >= 360) {
          hue = 0;
        }
        if (ctx.lineWidth >= 175 || ctx.lineWidth <= 1) {
          direction = !direction;
        }
        if (direction) {
          ctx.lineWidth++;
        } else {
          ctx.lineWidth--;
        }
      }

마우스의 움직임에 따라 선이 증가하거나 감소하는 방향을 전환하여 선 자체의 크기가 어떻게 변경되었는지 확인할 수도 있습니다. 코드의 한 줄은 실제로 얼마나 많은 일이 일어나고 있는지에 따라 여전히 혼란스럽습니다. 즉, if (ctx.lineWidth >= 175 || ctx.lineWidth <= 1) {
방향 =!방향;. 이 대사 전체가 나에게는 미친 짓이다. 대부분 일정량에 도달한 후 스스로 뒤집히도록 설계되었습니다. || 여전히 나 역시 혼란스럽고 당신이 ! 자바스크립트에서. 이 게시물을 쓴 후에 이에 대해 더 자세히 조사해 볼 예정이지만, 누구든지 이러한 개념 중 하나를 좀 더 설명해 주시면 매우 감사하겠습니다.

이번 챌린지에서 또 하나의 큰 깨달음을 얻었습니다. 그것은 JavaScript를 작성할 때 세미콜론을 사용하는 것입니다. 나에게 제안을 받았음에도 불구하고 나는 실제로 이것을 한 적이 없습니다. 나는 한 줄을 끝내고 새로운 줄을 계속하는 것만으로도 충분하다고 생각했습니다. CSS에서는 세미콜론을 사용해야 하고, 그렇게 하지 않으면 원하는 대로 작동할 것이라는 것을 알고 있습니다. JavaScript를 사용하지 않아서 문제가 발생한 것은 이번이 처음이었습니다. ctx.Stroke() 뒤에 세미콜론이 없기 때문에 내 코드는 기본적으로 손상되었습니다. 좋아요, 여전히 작동했지만 확실히 의도한 대로는 아니었습니다. 어떤 이유로 다음 코드 줄이 실행되었지만 세미콜론으로 완전히 수정되었습니다. 교훈을 얻었습니다.

모두가 즐거운 도전이었습니다. HTML5 Canvas로 할 수 있는 모든 작업에 대해 표면적인 부분만 간신히 살펴보더라도 HTML5 Canvas를 가지고 장난치는 것이 정말 즐거웠습니다. 나는 브라우저에 원래 있어야 할 것보다 더 오랫동안 그림을 그렸고, 어떤 일이 일어날지 알아보기 위해 돌아가서 일부 값(예: 색조가 어떻게 증가하는지, 선의 최대 너비 등)을 망쳐 놓았습니다. 아마 시도하더라도 이것을 스스로 재현할 수는 없을 것입니다. 하지만 JavaScript 몇 줄만으로 무엇을 할 수 있는지에는 여전히 매료됩니다!

오늘의 챌린지는 여기까지입니다. 시간이 있다면 이 게임을 직접 시도해 보시기를 적극 권장합니다. 지금까지 본 게임 중 가장 재미있었기 때문입니다! 다음 JavaScript30 기사를 기대해 주세요: 14가지 필수 개발자 도구 요령!

위 내용은 JavaScript- HTMLanvas 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!