목차
<canvas> 객체 정의 - 그림 그리기 <canvas> 객체 구문 <canvas> 객체 예제 - 접근 <canvas> 객체 예제 - 생성 <canvas> 객체 속성/메서드 - 색 (Color), 스타일 (Style), 음영 (Shadow) <canvas> 객체 속성/메서드 - 선 (Line Styles) <canvas> 객체 속성/메서드 - 사각형 (Rectangles) <canvas> 객체 속성/메서드 - 경로 (Path) <canvas> 객체 속성/메서드 - 변환 (Transformation) <canvas> 객체 속성/메서드 - 텍스트 (Text) <canvas> 객체 속성/메서드 - 이미지 그리기 (Image Drawing) <canvas> 객체 속성/메서드 - 픽셀 조작 (Pixel Manipulation) <canvas> 객체 속성/메서드 - 합성 (Compositing) <canvas> 객체 속성/메서드 - 기타 (Other)
<canvas> 객체 정의 - 그림 그리기
HTML <canvas> 태그(요소) 의미. (HTML5 추가)
<canvas> 객체 구문
[접근]
var x = document.getElementById ("요소ID");
[생성]
var x = document.createElement ("CANVAS");
<canvas> 객체 예제 - 접근
<style>
#hz {width:300px; height:150px; border:1px solid gray;}
</style>
<canvas id="hz">브라우저가 HTML5 canvas 태그 지원 X</canvas>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var x = document.getElementById("hz");
var ctx = x.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100);
}
</script>
결과보기
<canvas> 객체 예제 - 생성
<style>
canvas {border: 1px solid gray;}
</style>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var x = document.createElement("CANVAS");
var ctx = x.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100);
document.body.appendChild(x);
}
</script>
결과보기
<canvas> 객체 속성/메서드 - 색 (Color), 스타일 (Style), 음영 (Shadow)
[속성]
fillStyle
도면을 채우는 데 사용되는 색상, 그라디언트 또는 패턴을 설정/반환.
strokeStyle
획에 사용되는 색상, 그라디언트 또는 패턴을 설설정/반환.
shadowColor
그림자에 사용할 색상을 설정/반환.
shadowBlur
그림자의 흐림 수준 설정/반환.
shadowOffsetX
셰이프에서 그림자의 수평거리 설정/반환.
shadowOffsetY
셰이프에서 그림자의 수직거리 설정/반환.
[메서드]
createLinearGradient()
캔버스 내용에 사용할 선형 그라디언트 생성.
createPattern()
지정된 요소를 지정된 방향으로 반복.
createRadialGradient()
캔버스 콘텐츠에 사용할 방사형 / 원형 그라디언트 생성.
addColorStop()
그라디언트 객체의 색상 및 정지 위치 지정.
<canvas> 객체 속성/메서드 - 선 (Line Styles)
[속성]
lineCap
라인의 엔드 캡 스타일을 설정/반환.
lineJoin
두 줄이 만나면 만들어지는 모서리 유형을 설정/반환.
lineWidth
현재 줄 너비를 설정/반환.
miterLimit
최대 마이터 길이를 설정/반환.
[메서드]
없음.
<canvas> 객체 속성/메서드 - 사각형 (Rectangles)
[속성]
없음.
[메서드]
rect()
직사각형 생성.
fillRect()
"채워진" 사각형 그리기.
strokeRect()
"안 채워진" 사각형 그리기.
clearRect()
지정된 사각형 내에서 지정된 픽셀 지우기.
<canvas> 객체 속성/메서드 - 경로 (Path)
[속성]
없음.
[메서드]
fill()
현재 도면을 채우기. (경로)
stroke()
실제로 정의한 경로를 그리기.
beginPath()
경로를 시작하거나 현재 경로를 재설정.
moveTo()
선을 만들지 않고 캔버스에서 지정된 점으로 경로를 이동.
closePath()
현재 지점에서 시작 지점으로의 경로 생성.
lineTo()
새 점을 추가하고 해당 점에서 캔버스의 마지막 지정된 점까지 선을 만들기.
clip()
원본 캔버스에서 모든 모양과 크기의 영역을 자르기.
quadraticCurveTo()
2차 베지어곡선 만들기.
bezierCurveTo()
3차 베지어곡선 만들기.
arc()
호 / 곡선을 만들기. (원 또는 원의 일부를 만드는 데 사용)
arcTo()
두 탄젠트 사이에 호 / 곡선 만들기.
isPointInPath()
지정된 점이 현재 경로에 있으면 true를, 그렇지 않으면 false를 반환.
<canvas> 객체 속성/메서드 - 변환 (Transformation)
[속성]
없음.
[메서드]
scale()
현재 도면을 더 크거나 작게 조정.
rotate()
현재 도면을 회전.
translate()
캔버스에서 (0,0) 위치를 다시 매핑.
transform()
도면의 현재 변형 행렬을 바꾸기.
setTransform()
현재 변환을 단위 행렬로 재설정. 그런 후, transform() 실행.
<canvas> 객체 속성/메서드 - 텍스트 (Text)
[속성]
font
텍스트 내용의 현재 글꼴 속성을 설정/반환.
textAlign
텍스트 내용에 대한 현재 정렬을 설정/반환.
textBaseline
텍스트를 그릴 때 사용되는 현재 텍스트 기준선을 설정/반환.
[메서드]
fillText()
캔버스에 "채워진" 텍스트 그리기.
strokeText()
캔버스에 "안 채워진" 텍스트 그리기.
measureText()
지정된 텍스트의 폭을 포함한 객체를 반환.
<canvas> 객체 속성/메서드 - 이미지 그리기 (Image Drawing)
[속성]
없음.
[메서드]
drawImage()
이미지, 캔버스 또는 비디오를 캔버스에 그리기.
<canvas> 객체 속성/메서드 - 픽셀 조작 (Pixel Manipulation)
[속성]
width ImageData
객체 너비 반환.
height ImageData
객체 높이 반환.
data
지정된 ImageData 객체의 이미지 데이터가 포함된 객체 반환.
[메서드]
createImageData()
새로운 빈 ImageData 객체를 작성.
getImageData()
캔버스상의 지정된 구형의 픽셀 데이터를 카피하는 ImageData 객체를 반환.
putImageData()
지정된 ImageData 객체로부터 이미지 데이터를 캔버스에 다시 넣기..
<canvas> 객체 속성/메서드 - 합성 (Compositing)
[속성]
globalAlpha
도면의 현재 알파 또는 투명도 값을 설정/반환.
globalCompositeOperation
기존 이미지에 새 이미지를 그리는 방법을 설정/반환.
[메서드]
없음.
<canvas> 객체 속성/메서드 - 기타 (Other)
[속성]
없음.
[메서드]
save()
현재 컨텍스트의 상태를 저장
restore()
이전에 저장된 경로 상태 및 속성을 반환.
createEvent()
이벤트 생성.
getContext()
내용 얻기
toDataURL()
캔버스의 내용을 data URL 문자열로 변환.
※ <canvas> 객체는 표준 속성/메서드 /이벤트 지원.
