[HTML5] Canvas

canvas.html

그림판.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);