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

HTML5 Canvas를 사용하여 선을 그리는 방법은 무엇입니까?

HTML5 태그는 스크립팅을 사용하여 그래픽, 애니메이션 등을 그리는 데 사용됩니다. HTML5에 도입된 새로운 태그입니다. lineTo() 메서드를 사용하여 HTML5 캔버스를 사용하여 선을 그립니다.

HTML5 Canvas를 사용하여 선을 그리는 방법은 무엇입니까?

다음 코드를 실행하여 HTML5 Canvas를 사용하여 선을 그리는 방법을 배울 수 있습니다.

예시

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>

   <body>
      <canvas id="newCanvas" width="400" height="300" style="border:1px
         solid #000000;"></canvas>
      <script>
         var c = document.getElementById('newCanvas');
         var ctx = c.getContext('2d');

         // Drawing lines
         ctx.beginPath();
         ctx.moveTo(30, 30);
         ctx.lineTo(180, 100);
         ctx.moveTo(30, 10);
         ctx.lineTo(260, 100);
         ctx.stroke();
      </script>
   </body>
</html>

출력

HTML5 Canvas를 사용하여 선을 그리는 방법은 무엇입니까?