자바스크립트에서 속이 빈 사각형을 구현하는 방법-프런트엔드 Q&A-php.cn

자바스크립트에서 속이 빈 사각형을 구현하는 방법

PHPz

풀어 주다： 2023-04-27 10:33:01

원래의

1319명이 탐색했습니다.

웹 개발에서 페이지의 표시 효과를 풍부하게 하기 위해 그래픽을 사용해야 하는 경우가 종종 있는데, 그 중 사각형은 가장 단순하고 기본적인 그래픽 중 하나입니다. 속이 빈 정사각형을 만들고 싶다면 JavaScript로 간단한 코드를 작성하면 됩니다.

다음은 JavaScript를 사용하여 빈 사각형을 구현하는 방법을 보여줍니다.

HTML 파일 만들기

먼저 페이지의 기본 프레임워크를 구현하기 위한 HTML 파일을 만들어야 합니다. 코드는 다음과 같습니다:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript实现空心正方形</title>
    <meta charset="UTF-8">
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
<script src="script.js"></script>
</html>

로그인 후 복사

여기에서는 HTML5 캔버스 태그를 사용하여 ID가 "canvas"인 그래픽을 그립니다. 이 태그는 JavaScript 스크립트에서 참조됩니다.

JavaScript 스크립트 작성

다음으로 속이 빈 사각형을 그리는 기능을 구현하고 이를 HTML 파일에 도입하는 JavaScript 스크립트를 작성해야 합니다.

스크립트 파일에서 캔버스 개체를 가져와 후속 그리기 프로세스에 사용할 너비와 높이를 설정해야 합니다.

코드는 다음과 같습니다:

var canvas = document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;

로그인 후 복사

다음으로 캔버스에 그래픽을 그리기 위해 캔버스의 컨텍스트 개체 "ctx"를 가져와야 합니다.

코드는 다음과 같습니다.

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

로그인 후 복사

다음으로 속이 빈 사각형을 그리는 함수를 작성해야 합니다.

코드는 다음과 같습니다:

function drawSquare(x, y, sideLength) {
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + sideLength, y);
  ctx.lineTo(x + sideLength, y + sideLength);
  ctx.lineTo(x, y + sideLength);
  ctx.closePath();
  ctx.stroke();
}

로그인 후 복사

이 함수에서는 먼저 BeginPath() 메서드를 사용하여 새 경로를 연 다음 moveTo() 메서드를 사용하여 브러시를 시작점으로 이동한 다음 lineTo를 사용합니다. () 메서드를 사용하여 직선을 연결하고 사각형을 그립니다. 네 개의 모서리를 그리고 마지막으로 closePath() 메서드를 사용하여 마지막 선분을 연결하고 경로를 닫습니다. 스트로크() 메서드를 사용하여 테두리를 그립니다.

다음으로 실제 속이 빈 사각형을 그리는 함수를 호출해야 합니다. 코드는 다음과 같습니다.

drawSquare(100, 100, 300);

로그인 후 복사

여기서는 속이 빈 정사각형의 시작점을 (100,100), 변의 길이를 300으로 설정했습니다. 그러면 캔버스에 300×300 정사각형이 그려집니다.

을 실행하여 HTML 파일을 열면 빈 사각형이 그려지는 것을 볼 수 있습니다.

요약

이번 글에서는 자바스크립트를 이용하여 속이 빈 사각형을 구현하는 방법을 소개했습니다. 이 방법은 사각형을 그리는 것뿐만 아니라 다른 유형의 다각형을 그리는 데에도 적용됩니다. 실제 프로젝트에서는 일반적으로 다양한 정보를 표시하기 위해 다양한 그래픽을 그려야 하므로 이러한 기본 그리기 기술을 익히는 것은 우수한 페이지 효과를 개발하는 데 매우 중요합니다.

위 내용은 자바스크립트에서 속이 빈 사각형을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!