캔버스에 대한 기본 지식 습득: 알아야 할 모든 것

Canvas는 JavaScript로 그리는 방법을 제공하는 HTML5의 새로운 태그입니다. Canvas를 사용하면 그래픽을 그리고, 애니메이션을 만들고, 이미지를 처리하고, 웹 페이지에서 대화형 효과를 얻을 수 있습니다. 이 글에서는 Canvas 요소 생성, 기본 도형 및 경로 그리기, 텍스트 그리기, 이미지 사용 방법 등 Canvas에 대한 기본 지식을 소개하고 자세한 코드 예제를 제공합니다.

1. 캔버스 요소 만들기
   웹 페이지에서 캔버스를 사용하려면 먼저 캔버스 요소를 만들어야 합니다. Canvas 요소는 아래와 같이 HTML 코드를 사용하여 생성할 수 있습니다.

   <canvas id="myCanvas" width="500" height="500"></canvas>

   위 코드에서는 너비와 높이가 500픽셀이고 ID가 "myCanvas"인 Canvas 요소를 생성했습니다. 크기와 위치는 CSS를 통해 설정할 수 있습니다.

2. 그리기 컨텍스트 가져오기
   캔버스 요소를 만든 후 그리기 작업을 수행하기 전에 그리기 컨텍스트를 가져와야 합니다. Canvas 요소는 아래와 같이 그리기 컨텍스트를 얻기 위해 getContext() 메서드를 제공합니다.

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

   위 코드에서 먼저 getElementById() 메서드를 사용하여 ID가 ​​"myCanvas"인 Canvas 요소를 얻은 다음 getContext를 사용합니다. ("2d ") 메서드는 2D 드로잉 컨텍스트를 가져옵니다. Canvas는 webgl, webgl2 및 기타 그리기 컨텍스트도 지원합니다. 여기서는 주로 2D 그리기를 소개합니다.

3. 기본 모양 및 경로 그리기
   캔버스는 직사각형, 원, 선 등과 같은 기본 모양 및 경로를 그리는 몇 가지 방법을 제공합니다. 다음은 일반적으로 사용되는 몇 가지 메서드와 해당 샘플 코드입니다.

• 직사각형 그리기:

  ctx.fillStyle = "red"; // 设置填充颜色
  ctx.fillRect(50, 50, 100, 100); // 绘制矩形

  위 코드에서는 먼저 fillStyle 속성을 사용하여 채우기 색상을 빨간색으로 설정한 다음 fillRect() 메서드를 사용합니다. 왼쪽 상단 모서리의 좌표( 50, 50)를 사용하여 너비와 높이가 100픽셀인 사각형을 그립니다.

• 원 그리기:

  ctx.beginPath(); // 开始绘制路径
  ctx.arc(100, 100, 50, 0, 2 * Math.PI); // 绘制圆
  ctx.fillStyle = "blue";
  ctx.fill(); // 填充路径

  위 코드에서는 먼저 BeginPath() 메서드를 사용하여 경로 그리기를 시작한 다음 arc() 메서드를 사용하여 중심 좌표가 (100, 100) 및 반경 50픽셀의 각도와 끝 각도가 모두 0인 원입니다. 그런 다음 fillStyle 속성을 사용하여 채우기 색상을 파란색으로 설정하고 마지막으로 fill() 메서드를 사용하여 경로를 채웁니다.

• 직선 그리기:

  ctx.moveTo(100, 200); // 将画笔移动到坐标(100, 200)
  ctx.lineTo(200, 200); // 绘制直线到坐标(200, 200)
  ctx.strokeStyle = "green"; // 设置描边颜色
  ctx.stroke(); // 描边路径

  위 코드에서는 먼저 moveTo() 메서드를 사용하여 브러시를 좌표(100, 200)로 이동한 다음 lineTo() 메서드를 사용하여 직선을 그립니다. (200, 200) 좌표로. 그런 다음 스트로크 스타일 속성을 사용하여 스트로크 색상을 녹색으로 설정하고 마지막으로 스트로크() 메서드를 사용하여 패스를 스트로크합니다.

4. 텍스트 그리기
   Canvas는 fillText(), 스트로크텍스트() 등과 같이 텍스트를 그리는 여러 가지 방법을 제공합니다. 다음은 텍스트를 그리는 샘플 코드입니다.

ctx.font = "30px Arial"; // 设置字体样式
ctx.fillStyle = "black"; // 设置填充颜色
ctx.fillText("Hello Canvas!", 100, 100); // 绘制填充文本
ctx.strokeStyle = "red"; // 设置描边颜色
ctx.strokeText("Hello Canvas!", 100, 100); // 绘制描边文本

위 코드에서는 먼저 글꼴 속성을 사용하여 글꼴 스타일을 설정한 다음 fillStyle 속성을 사용하여 채우기 색상을 검은색으로 설정하고 fillText()를 호출합니다. 채워진 텍스트를 그리는 방법. 그런 다음, 스트로크 스타일 속성을 사용하여 획 색상을 빨간색으로 설정하고, 스트로크 텍스트() 메서드를 호출하여 획 텍스트를 그립니다.

5. 이미지 사용
   캔버스는 이미지를 사용하여 그림을 그릴 수 있고, 이미지 개체를 사용하여 이미지를 로드할 수 있습니다. 다음은 이미지를 사용하는 샘플 코드입니다.

var img = new Image(); // 创建Image对象
img.src = "image.jpg"; // 设置图像路径
img.addEventListener("load", function() {
  ctx.drawImage(img, 0, 0); // 绘制图像
});

위 코드에서 먼저 Image 개체를 만든 다음 src 속성을 사용하여 이미지 경로를 설정합니다. 로드 이벤트에서 drawImage() 메서드를 호출하여 이미지를 그립니다. 매개 변수는 Image 객체이고 왼쪽 위 모서리의 좌표(0, 0)입니다.

위 내용은 Canvas에 대한 기본 지식과 코드 예시입니다. 이러한 기본 지식을 학습함으로써 그리기 작업에 Canvas를 이해하고 사용하는 데 도움이 될 수 있습니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 캔버스에 대한 기본 지식 습득: 알아야 할 모든 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!