HTML 캔버스 그리기
JavaScript로 캔버스에 그리기
HTML 캔버스의 모든 그리기는 JavaScript로 이루어져야 합니다.
예시
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
1단계: 캔버스 요소 찾기
먼저 <canvas> 요소를 찾아야 합니다.
이것은 HTML DOM 메소드 getElementById()를 사용하여 수행됩니다.
var canvas = document.getElementById("myCanvas");
2단계: 그리기 개체 만들기
둘째, 캔버스에 대한 그리기 개체가 필요합니다.
getContext()는 그리기를 위한 속성과 메서드가 있는 내장 HTML 객체입니다.
var ctx = canvas.getContext("2d");
3단계: 캔버스에 그리기
마지막으로 캔버스에 그릴 수 있습니다.
그리기 개체의 채우기 스타일을 빨간색으로 설정합니다.
ctx.fillStyle = "#FF0000";
fillStyle 속성은 CSS 색상, 그라디언트 또는 패턴일 수 있습니다. 기본 fillStyle은 검정색입니다.
fillRect( x,y,width,height ) 메서드는 캔버스에 채우기 스타일로 채워진 사각형을 그립니다.
ctx.fillRect(0, 0, 150, 75);