JavaScript 기본 사항 #8: 캔버스에 그리기

이 자습서의 소스 코드를 다운로드할 수 있습니다.
Download the Source Code
우리가 HTML과 CSS를 토론할 때 SVG를 간략하게 소개했던 것을 기억하십니까?HTML 태그를 간단하게 사용하여 아름다운 이미지를 만들 수 있습니다.오늘, 우리는 canvas와 유사한 것을 소개할 것이다. 단지 자바스크립트를 사용하여 웹 페이지에 도형을 만들 수 있을 뿐이다.그리고 간단한 표기 언어가 아닌 프로그래밍 언어를 사용하기 때문에 캔버스는 SVG보다 더욱 유연하고 강력하다.

화포
SVG에는 모양, 색, 위치가 HTML로 표시되는 DOM 트리 구조가 있다는 것을 알고 있습니다.그러나 캔버스는 별도의 HTML 노드이지만 웹 페이지에 공간을 봉하여 자바스크립트를 사용하여 아름다운 예술품을 만들 수 있습니다.<canvas> 태그를 사용하여 공간을 정의할 수 있습니다.다음은 캔버스 공간에 간단한 사각형을 만드는 예입니다.

<canvas width="300px" height="200px"></canvas>
<script>
  let canvas = document.querySelector("canvas");
  let context = canvas.getContext("2d");

  // Define the colour of the rectangle
  context.fillStyle = "red";

  // The first two parameters means that the top left corner of the ractagle is at coordinate (10, 10)
  // The last two parameters define the width and height of the ractangle (width:100px, height:50px)
  context.fillRect(10, 10, 100, 50);
</script>

getContext() 방법은 그림 인터페이스에 접근하는 데 사용된다. 이것은 마치 도구 상자처럼 디지털 펜과 연필을 저장하는 데 사용된다.매개변수"2d"는 2D 그래픽을 나타냅니다.3차원 도형 만들기에 관심이 있다면 '웹gl' 을 사용해야 합니다.하지만 우리는 현재 2D 시스템에만 주목하고 있다.
또한 캔버스는 시작할 때 캔버스의 크기를 정의하는 것을 주의하세요.만약 이렇게 하지 않는다면, canvas 요소의 기본 너비는 300 픽셀, 높이는 150 픽셀입니다.

라인
우리가 방금 만든 직사각형은 속이 채워져 있고, 직사각형의 내부는 채워져 있다.우리가 다른 걸 원한다면?우리도 매우 유사한 방법strokeRect()을 사용하여 획을 긋는 직사각형을 만들 수 있다.이 방법은 앞의 두 정의 위치, 뒤의 두 정의 크기 등 네 개의 매개 변수가 필요하다.

<canvas></canvas>
<script>
  let canvas = document.querySelector("canvas");
  let context = canvas.getContext("2d");

  // Define the colour, position and size
  context.strokeStyle = "blue";
  context.strokeRect(10, 10, 100, 50);

  // Define the width of the strok and create a new rectangle
  context.lineWidth = 5;
  context.strokeRect(150, 10, 100, 50);
</script>

경로
지금 당신은 이것이 결코 흥분되지 않는다고 생각할 수 있습니다. 우리는 SVG를 사용하여 직사각형을 쉽게 만들 수 있습니다.걱정하지 마라, 화포의 진정한 힘은 지금부터 시작된다.
우선 경로가 무엇인지 이해해야 한다.경로는 일련의 선입니다.예를 들어, 좌표(0, 0)에서 (0, 50)까지의 선이 있고, 두 번째(0, 50)에서 (80, 50)까지의 선이 있으며, 세 번째(80, 50)에서 (80100)까지의 선이 있습니다.이 세 선은 하나의 경로를 형성할 것이다.
화포는 우리로 하여금 이런 일을 할 수 있게 한다.

<canvas width="500px" height="500px"></canvas>
<script>
  let canvas = document.querySelector("canvas");
  let context = canvas.getContext("2d");

  context.lineWidth = 5;
  context.strokeStyle = "green";

  context.beginPath();

  // The path starts at (10, 10)
  context.moveTo(10, 10);

  // Drawing the path: (10, 10) -> (150, 10) -> (150, 150) -> (10, 150) -> (10,10)
  context.lineTo(150, 10);
  context.lineTo(150, 150);
  context.lineTo(10, 150);
  context.lineTo(10, 10);

  context.stroke();
</script>

경로를 통해 우리는 우리가 원하는 모양을 만들 수 있다.예를 들어, 다음 코드는 삼각형을 생성합니다.

<canvas width="500px" height="500px"></canvas>
<script>
  let canvas = document.querySelector("canvas");
  let context = canvas.getContext("2d");

  context.beginPath();

  context.fillStyle = "red";

  context.moveTo(200, 10);
  context.lineTo(250, 100);
  context.lineTo(150, 100);
  context.lineTo(200, 10);

  context.fill();
</script>

커브
경로는 직선으로 만들 수도 있고 곡선으로 만들 수도 있다.그러나 커브는 더 정의하기 어렵습니다.
커브를 정의하려면 시작점, 끝점, 제어점이 필요합니다.커브는 제어점을 직접 통과하지 않고 시작점과 끝점의 탄젠트가 통과하는 점을 정의합니다.
그건 좀 이해가 안돼.나는 네가 먼저 포토샵의 만년필 도구나 GIMP의 경로 도구를 익히는 것을 건의한다.그것들은 인코딩을 제외하고는 곡선이 어떤 모양인지 상상해야 한다는 개념을 가지고 있다.
이것은 또 다른 예다.우리는 먼저 곡선을 그리고 나서 절선과 제어점을 그려서 여기에서 무슨 일이 일어났는지 이해하는 데 도움을 줄 수 있다.

<canvas width="500px" height="500px"></canvas>
<script>
  let canvas = document.querySelector("canvas");
  let context = canvas.getContext("2d");

  context.beginPath();

  // start point = (10, 90)
  context.moveTo(10, 90);

  // control point = (60,10); destination point = (90,90)
  context.quadraticCurveTo(60, 10, 90, 90);

  // destination point tangent
  context.lineTo(60, 10);

  // start point tangent
  context.moveTo(10, 90);
  context.lineTo(60, 10);

  context.closePath();
  context.stroke();
</script>

때때로 우리는 기점 접선과 종점이 서로 다른 제어점을 가지기를 바란다.bezierCurveTo() 방법을 사용해도 이 점을 실현할 수 있다.

<canvas width="500px" height="500px"></canvas>
<script>
  let canvas = document.querySelector("canvas");
  let context = canvas.getContext("2d");

  context.beginPath();

  // start point = (10, 90)
  context.moveTo(10, 90);

  // start control point = (60,10); destination control point = (30,80); destination point = (90,90)
  context.bezierCurveTo(60, 10, 30, 80, 90, 90);

  // destination point tangent
  context.lineTo(30, 80);

  // start point tangent
  context.moveTo(10, 90);
  context.lineTo(60, 10);

  context.closePath();
  context.stroke();
</script>

문자 메시지
우리가 도표를 만들 때 텍스트도 유용할 수 있습니다.우리는 fillText 과 strokeText 를 사용하여 텍스트를 그릴 수 있다.후자는 텍스트의 대강만 보여주고 텍스트를 채우지 않는다.

<canvas width="1500px" height="500px"></canvas>
<script>
  let canvas = document.querySelector("canvas");
  let context = canvas.getContext("2d");

  context.font = "28px Georgia";

  context.fillText("Lorem ipsum dolor sit amet, consectetur adipiscing elit.", 10, 50);

  context.strokeText("Lorem ipsum dolor sit amet, consectetur adipiscing elit.", 10, 100);
</script>

마지막 두 매개변수는 텍스트의 위치를 나타내지만 그래픽 형태와 달리 텍스트 베이스라인의 시작점에 대한 좌표를 정의합니다.베이스라인은 텍스트 "서기"의 행입니다.

바꾸다
주로 세 가지 유형의 변환이 있는데 그것이 바로 평이translate(), 축소scale()와 회전rotate()이다.이 방법들은 변환할 도형 앞에 두어야 한다는 것을 명심하세요.
변환은 그래픽을 한 위치에서 다른 위치로 이동합니다.

<canvas width="1500px" height="1500px"></canvas>
<script>
  let canvas = document.querySelector("canvas");
  let context = canvas.getContext("2d");

  // Move whatever graph created after to the right for 50px and downward for 100px
  context.translate(50, 100);

  // Create a graph
  context.beginPath();

  context.fillStyle = "red";

  context.moveTo(200, 10);
  context.lineTo(250, 100);
  context.lineTo(150, 100);
  context.lineTo(200, 10);

  context.fill();

</script>

축척은 원본 도면을 크거나 작게 만듭니다.

<script>
  let canvas = document.querySelector("canvas");
  let context = canvas.getContext("2d");

  // Make the graph 2 times wider (along x-axis) 0.5 time shorter (along y-axis)
  context.scale(2, 1/2);

  // Create a graph
  ...

</script>

마지막으로 축을 따라 그래프를 회전할 수 있습니다.

<canvas width="1500px" height="1500px"></canvas>
<script>
  let canvas = document.querySelector("canvas");
  let context = canvas.getContext("2d");

  // Rotate the graph clockwise for 18 degrees. Notice that the rotate() method takes radian instead of degree.
  context.rotate(0.1 * Math.PI);

  // Create a graph
  ...

</script>

비트맵 그래픽
컴퓨터 도형학에는 벡터 그래프와 비트맵이라는 것이 있다.지금까지 우리가 토론한 모든 도형은 벡터 도형이다.그것들의 주요 차이점은 비트맵 도형은 픽셀로 구성된 것이지 벡터 도형은 그렇지 않다는 데 있다.반면 이들은 벡터와 같은 방향과 크기(길이)를 가진 경로로 이루어져 있다.
그러나 때때로 우리는 벡터 도형 디자인에 비트맵 도형을 삽입해야 한다.우리는 drawImage() 방법을 사용하여 이 점을 실현할 수 있다.

<canvas width="1500px" height="1500px"></canvas>
<script>
  let canvas = document.querySelector("canvas");
  let context = canvas.getContext("2d");

  let img = document.createElement("img");
  img.src = "cat.jpg";

  img.addEventListener("load", () => {
    context.drawImage(img, 10, 10, 360, 240);
  });
</script>

이 예에서 이미지는 360px*240px 크기의 좌표(10,10)에 그려집니다.
그림% 1개의 캡션을 편집했습니다. 그림% 1개의 캡션을 편집했습니다.