HTML DOM 캔버스 객체

<시간/>

HTML DOM Canvas 객체는 HTML5에 도입된

속성

다음은 Canvas Object의 속성입니다 -

속성	설명
채우기 스타일	그림을 채우는 데 사용되는 색상, 그라디언트 또는 패턴을 설정하거나 반환합니다.
스트로크 스타일	획에 사용되는 색상, 그라디언트 또는 패턴을 설정하거나 반환합니다.
그림자 색상	그림자에 사용할 색상을 설정하거나 반환합니다.
그림자 흐림 효과	그림자의 흐림 수준을 설정하거나 반환합니다.
shadowOffsetX	모양에서 그림자의 수평 거리를 설정하거나 반환합니다.
shadowOffsetY	모양에서 그림자의 수직 거리를 설정하거나 반환합니다.

방법

다음은 Canvas 객체의 메소드입니다 -

메소드	설명
createLinearGradient()	선형 그라디언트를 생성하려면
createPattern()	특정 요소를 한 방향으로 반복하여 패턴을 생성합니다.
shadowColor	그림자에 사용할 색상을 설정하거나 반환합니다.
CreateRadialGradient()	원형 그라디언트 생성
addColorStop()	모양에서 그림자의 수평 거리를 설정하거나 반환합니다.

구문

다음은 −

의 구문입니다.

캔버스 개체 만들기 -

var x=document.createElement("CANVAS");

예시

HTML DOM 캔버스 개체의 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<head>
<style>
   canvas {
      border: 1px double blue;
      margin:1em;
   }
</style>
</head>
<body>
<h1>CANVAS</h1>
<button onclick="createCanvas()">CREATE</button>
<p>Click the above button to create a CANVAS element with a green circle in it</p>
<script>
   function createCanvas() {
      var x = document.createElement("CANVAS");
      var ctx = x.getContext("2d");
      ctx.fillStyle = "#C7EA46";
      ctx.beginPath();
      ctx.arc(100, 75, 50, 0, 2 * Math.PI);
      ctx.fill();
      ctx.stroke();
      document.body.appendChild(x);
   }
</script>
</body>
</html>

출력

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

HTML DOM 캔버스 객체

CREATE 클릭 시 -

HTML DOM 캔버스 객체

위의 예에서 -

먼저 CREATE 버튼을 만들었습니다. 이 버튼을 클릭하면 createCanvas() 메서드가 실행됩니다.

<button onclick="createCanvas()">CREATE</button>

createCanvas() 메소드는

그런 다음 arc() 메서드를 사용하여 원 좌표를 정의하고 해당 원을 채우기 스타일 색상으로 채웁니다. 마지막으로 우리는 실제로 캔버스에 그리기 위해 stroke() 메소드를 사용하고 document.body의 appendChild() 메소드를 사용하여 캔버스를 body 요소의 자식으로 추가합니다 -

function createCanvas() {
   var x = document.createElement("CANVAS");
   var ctx = x.getContext("2d");
   ctx.fillStyle = "#C7EA46";
   ctx.beginPath();
   ctx.arc(100, 75, 50, 0, 2 * Math.PI);
   ctx.fill();
   ctx.stroke();
   document.body.appendChild(x);
}