[HTML5] Canvas
canvas.html<canvas id="mycanvas" width="500" height="200"></canvas>
var canvas = document.getElementById("mycanvas"); //canvas의 DOM 객체를 얻는다.
var context = canvas.getContext("2d"); //DOM 객체로부터 2D 컨텍스트를 얻는다.
* 사각형
fillRect(x,y,width,height) : 색으로 채운 사각형을 그린다.
strokeRect(x,y,width,height) : 선만 있는 사각형을 그린다.
clearRect(x,y,width,height) : 사각형을 지운다.
* N각형
beginPath() : canvas에 패스그리기를 알린다.
moveTo(x,y) : 패스의 시작점
lineTo(x,y) : 패스의 도착점
stroke() : 윤곽선을 그린다.
fill() : 색을 채운다.
closePath() : 패스를 닫는다.
* 원
beginPath() : canvas에 패스그리기를 알린다.
arc(x,y,width,height,2*Math.PI,true) : 원을 그린다.
stroke() : 윤곽선을 그린다.
closePath() : 패스를 닫는다.
* 스타일
fillStyle : 채우기
strokeStyle : 윤곽선
createLinearGradient(x,y,x1,y1) : 선형 그라데이션
createRadialGradient(x,y,r,x1,y1,r1) : 원형 그라데이션
shadowColor : 그림자 색상
shadowOffsetX : 그림자 위치 지정
shadowOffsetY : 그림자 위치 지정
shadowBlur : 그림자 흐리기
* 텍스트
font = "font size 'font name'";
fillText : 채워진 텍스트
strokeText: 윤곽선만 있는 텍스트
* 이미지
image.onload = function() {
context.rotate(20*Math.PI/180);
var pattern = context.createPattern(image,"repeat");
context.fillStyle = pattern;
context.fillRect(0,0,400,300); //fillRect(0, 0, canvas.width, canvas.height);
}
image.src="image 경로";
* canvas 초기화
canvas.width = canvas.width;
context.claerRect(0,0,canvas.width,canvas.height);