안녕 모두들! 마지막 게시물 이후 견고한 한 달이 지났지만 다시 돌아왔습니다. 이번에는 지난번에 만들었던 형편없는 작은 라디오를 마무리하는 데 집중하고 싶습니다. 문맥상 here은 내가 에서 중단한 것입니다.

이 작은 프로젝트는 32줄의 코드를 사용하여… 그러나 경쟁이 끝났으므로 이제 더 많은 코드, 특히 화면에 작은 라디오를 그리는 CSS와 이 프로젝트를 현재보다 조금 더 견고하게 만들기 위한 약간의 JavaScript를 사용하여 이 작은 프로젝트를 전체적으로 만들 수 있습니다.

그러나 재생 및 일시 중지 기능을 추가하기 전에 실제로 라디오와 유사한 것을 렌더링해야 합니다. 실제로는 라디오가 아닐 수도 있지만 ACNH의 Tape Deck처럼 보이는 것을 렌더링하려고 합니다.

라디오 그리기

먼저 라디오를 그려야 합니다. 대부분의 사람들은 그냥… 그림판, 김프 또는 좋아하는 다른 이미지 조작 프로그램에서 하나를 그립니다. 그러나 이것은 코딩 블로그이고 .png 파일을 그리는 데는 코드를 작성할 필요가 없으므로 대신 HTML canvas element을 사용할 것입니다. 자바스크립트.

라디오를 그릴 수 있기 위해 어떤 방법을 사용할 수 있는지 완전히 알지 못했기 때문에 이것은 매우 어려웠습니다. 나는 주로 모양을 그릴 수 있어야 했지만 라디오의 표면에도 약간의 질감이 있기를 원했습니다. 나는 계속해서 라디오 본체를 위한 상자부터 시작하기로 결정했습니다. 이렇게 하려면 canvas가 필요합니다.

<canvas id="radio" width="500px" height="300px"></canvas>

쉬운. 이제 라디오 본체를 나타내는 상자를 그립니다. 그러기 위해서는 canvas에서 2차원 컨텍스트를 가져와 도형 그리기를 시작해야 합니다.

const canvas = document.getElementById('radio');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = '#ddd';
ctx.fillRect(25, 50, 450, 250);

코드는 여기에서 약간 지루해집니다. 대부분 fillStyle 속성을 설정하고 fillRect를 호출하여 대부분의 몸체를 그리는 것을 반복합니다. 테이프 데크 보기 상자를 만들기 위해 arc 함수를 호출하여 원을 몇 개 그렸는데 원을 그리는 코드가 조금 다릅니다. fillRect는 사각형을 그리고 패턴이나 단색으로 채우는 반면 호는 fill 또는 stroke를 호출하는지 여부에 따라 다르게 그릴 수 있습니다.

ctx.beginPath();
ctx.fillStyle = '#aaa';
ctx.arc(128, 210, 10, 0, 2*Math.PI);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = '#ddd';
ctx.arc(128, 210, 8, 0, 2*Math.PI);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = '#aaa';
ctx.arc(170, 210, 10, 0, 2*Math.PI);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = '#ddd';
ctx.arc(170, 210, 8, 0, 2*Math.PI);
ctx.fill();

이 코드는 훨씬 밝은 회색 원 아래에 회색 원을 그립니다. 여기서 fill를 사용하면 fillStyle의 설정에 따라 특정 색상으로 채워진 원이 생성됩니다. stroke 그러나 다른 효과가 있습니다. 지정된 색상의 원을 그리는 것이 아니라 검은 윤곽선으로 원을 그립니다.

나는 라디오의 스테레오가 질감 있는 모양을 갖기를 원했지만 작은 줄을 쓰기 위해 많은 코드를 반복하고 싶지 않았기 때문에 내가 한 것은 내가 원하는 질감을 가진 아주 작은 이미지를 만들고 해당 이미지로 패턴을 만드는 컨텍스트createPattern 함수:

var radioTexture = new Image();
radioTexture.src = 'radio_texture.png';
radioTexture.onload = function() {
  var radioPattern = ctx.createPattern(radioTexture, 'repeat');
  ctx.fillStyle = radioPattern;
  ctx.beginPath();
  ctx.arc(350, 175, 100, 0, 2*Math.PI);
  ctx.fill();
};

이렇게 하면 캔버스를 사용하여 모두 그리지 않고도 원하는 질감을 쉽게 만들 수 있습니다.

약간의 CSS를 추가한 후 내가 만든 것이 마음에 들기 시작했습니다. 라디오는 이제 조금 덜 못생겼고... 사실 라디오처럼 생겼어요!

결론

여기에 추가하고 싶은 것이 아직 많이 있지만, 이것은 조금 더 좋아 보이는 것을 위한 꽤 좋은 시작입니다. 제품을 지금 있는 그대로 보려면 click here . 2021년 어느 시점에 우리는 더 많은 기능을 추가하기 시작할 것이고, 바라건대…

이것은 아마도 올해 제가 작성하는 마지막 블로그 게시물이 될 것이므로 올해 제가 작성한 게시물이 마음에 드셨다면 먼저 읽어 주셔서 감사합니다. 무엇을 알려주세요. 당신이 가장 좋아하는 것은 소셜 미디어에 있었고 그 이유는 무엇입니까!

당신과 당신의 가족 및 친구들에게 행복한 휴일과 새해 복 많이 받으세요! 모두 2021년에 다시 만나요!