Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML 캔버스 기초

<시간/>

웹 페이지에 캔버스를 그리려면 HTML5 캔버스 요소를 사용합니다. 요소를 사용하면 JavaScript를 사용하여 그래픽을 그릴 수 있습니다. 캔버스를 사용하여 선, 직사각형, 베지어 곡선 등을 그립니다.

모든 캔버스에는 캔버스의 높이와 너비, 즉 각각 높이와 너비를 설명하는 두 가지 요소가 있습니다.

이를 통해 아래 코드 스니펫과 같이 캔버스에 대한 ID도 설정해야 합니다. 

<canvas id = "newCanvas" width = "100" height = "100"></canvas>

getElementById() 메서드를 사용하여 DOM에서 해당 요소 찾기 -

var canvas = document.getElementById("newCanvas");

캔버스에 무언가를 표시하려면 스크립트가 먼저 렌더링 컨텍스트에 액세스하고 그 위에 그려야 합니다. 에는 렌더링 컨텍스트와 해당 그리기 기능을 얻기 위한 getContext라는 DOM 메서드가 있습니다. 이 함수는 context2d의 유형인 하나의 매개변수를 사용합니다.

이제 −

를 사용하여 HTML5에서 경로를 그리는 예를 살펴보겠습니다.

예시

<!DOCTYPE HTML>
<html>
<head>
<style>
   #test {
      width: 100px;
      height:100px;
      margin: 0px auto;
      background-color: orange;
   }
</style>
<script>
   function drawShape() {
      // get the canvas element using the DOM
      var canvas = document.getElementById('mycanvas');
      // Make sure we don't execute when canvas isn't supported
      if (canvas.getContext) {
         // use getContext to use the canvas for drawing
         var ctx = canvas.getContext('2d');
         // Draw shapes
         ctx.beginPath();
         ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
         ctx.moveTo(110,75);
         ctx.arc(75,75,35,0,Math.PI,false); // Mouth
         ctx.moveTo(65,65);
         ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
         ctx.moveTo(95,65);
         ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
         ctx.stroke();
      } else {
         alert('You need Safari or Firefox 1.5+ to see this demo.');
      }
   }
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML 캔버스 기초

HTML5에서 2차 곡선을 그리는 또 다른 예를 살펴보겠습니다.

예시

<!DOCTYPE HTML>
<html>
<head>
<style>
   #test {
      width: 100px;
      height:100px;
      margin: 0px auto;
   }
</style>
<script type>
   function drawShape() {
      // get the canvas element using the DOM
      var canvas = document.getElementById('mycanvas');  
      // Make sure we don't execute when canvas isn't supported
      if (canvas.getContext) {
         // use getContext to use the canvas for drawing
         var ctx = canvas.getContext('2d');
         // Draw shapes
         ctx.beginPath();
         ctx.moveTo(75,25);
         ctx.quadraticCurveTo(25,25,25,62.5);
         ctx.quadraticCurveTo(25,100,50,100);
         ctx.quadraticCurveTo(50,120,30,125);
         ctx.quadraticCurveTo(60,120,65,100);
         ctx.quadraticCurveTo(125,100,125,62.5);
         ctx.quadraticCurveTo(125,25,75,25);
         ctx.stroke();
      } else {
         alert('You need Safari or Firefox 1.5+ to see this demo.');
      }
   }
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML 캔버스 기초