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

JavaScript로 캔버스에 그리는 방법은 무엇입니까?


HTML 캔버스에 그림을 그리는 것은 JavaScript로 해야 합니다. 캔버스에 그리기 전에 HTML DOM 메소드 getElementById() 및 getContext()를 사용하십시오.

이를 위해 몇 가지 단계를 따르십시오 −

  • 캔버스 요소를 찾으려면 getElementById() 메서드를 사용해야 합니다.
  • 캔버스의 그리기 객체인 getContext()를 사용합니다. 그리기를 위한 메서드와 속성을 제공합니다.
  • 캔버스에 그립니다.

JavaScript로 캔버스에 그리는 방법은 무엇입니까?

예시

JavaScript에서 캔버스를 그리기 위해 다음 코드를 실행할 수 있습니다 -

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Canvas</title>
   </head>
   <body>
      <canvas id="newCanvas" width="400" height="250" style="border:2px solid #000000;"></canvas>
      <script>
         var canvas = document.getElementById("newCanvas");
         var ctxt = canvas.getContext("2d");
         ctxt.fillStyle = "#56A7E2";
         ctxt.fillRect(0,0,250,120);
      </script>
   </body>
</html>