반응형
* 캔버스
HTML5에서는 <canvas> 태그를 이용하여 웹페이지 상에 직접 그래픽 처리를 할 수 있음.
- 캔버스 생성 : <canvas id="아이디" width="가로길이" height="세로길이"></canvas>
- 화면의 좌측상단이 캔버스의 원점(기준점)
* 컨텍스트 객체 : 캔버스에 그림을 그리는 객체
캔버스객체.getContext("2d")
* 그래픽 method
- 좌표 이동 : moveTo(x,y)
- 선그리기 : lineTo(x,y)
- 사각형 그리기 : rect(x,y,width,height)
- 원 그리기 : arc( x, y, radius, startAngle, endAngle, antiClockwise )
antiClockwise : 반시계방향(true), 시계방향(false)
- 색상 채우기 : 컨텍스트.fillStyle = "색상";
- 이미지 그리기 : drawImage( 그림, x, y )
반응형