[HTML 요약정리] 06-1. 자바스크립트로 Canvas 제어

 

 

1. HTML5 캔버스의 사용법

 

HTML5 캔버스를 사용하려면 <canvas> 태그를 사용한다

캔버스는 그래픽을 그릴 수 있는 영역으로 너비(width)와 높이(height)를 속성으로 갖는다

 

<canvas id="ID" width="너비" height="높이"></canvas>

 

2. 캔버스 제어하기

 

만들어진 캔버스에 도형이나 그림 등을 그리거나, 그려진 것들을 움직이게 만드는 등의 제어는 스크립트에서 한다

 

<script>
// 여기에 캔버스를 제어하는 코드를 입력한다

$(document).ready(function(){
// 캔버스 제어 코드들
});

$(document).ready(function(){
	drawShape(); // 캔버스 제어 메소드 호출
});
function drawShape(){ // 캔버스 제어 메소드
// 캔버스 제어 코드들
}
</script>

 

• 그림이 그려질 캔버스 영역 얻어내기
  HTML 코드 부분에 정의한 <canvas> 태그를 자바스크립트에서 제어할 수 있도록 얻어낸다

--JS--
$(document).ready(function(){
var cvs=$("#canvas1")[0];
});

--HTML--
<canvas id="canvas1" width="300" height="200"></canvas>

 

• 그리기 작업을 위한 그래픽 2D 콘텍스트 얻어내기
  얻어낸 canvas 엘리먼트 객체에서 getContext("2d"); 메소드를 사용해서 2D 콘텍스트를 얻어낸다

--JS--
$(document).ready(function(){
var cvs=$("#canvas1")[0]; // cvs는 canvas 엘리먼트 객체가 저장된 객체 변수
var ctx=cvs.getContext("2d"); // 그래픽 2D 콘텍스트 얻어내기
});

--HTML--
<canvas id="canvas1" width="300" heigth="200"></canvas>

 

3. 도형 문자열 이미지 그리기

 

캔버스에 그리기 위해서 canvas 엘리먼트 객체를 얻어내고, 이 얻어낸 객체의 getContext("2d") 메소드를 사용해서

2D 콘텍스트 객체를 얻어내고 나면 이제

그리기 메소드를 사용해서 그리기 작업을 할 수 있다

 

$(document).ready(function(){
	var cvs=$("#canvas1")[0]; // 캔버스 객체를 얻어냄
    car ctx=cvs.getContext("2d"); // 캔버스 객체로부터 2D 콘텍스트 객체를 얻어냄
    // (10,10)좌표에 가로80, 세로50 크기의 채워진 사각형을 그린다
    ctx.fillRect(10,10,80,50); // fillRect() 메소드는 안이 채워진 사각형을 그림
});

 

<캔버스의 그리기 관련 속성들>

속성	설명
data	주어진 이미지 데이터가 포함된 ImageData 객체를 리턴
fillStyle	색, 그러데이션, 패턴 등으로 채우기를 지정하거나 얻어냄
font	텍스트 폰트를 지정하거나 얻어냄
height	ImageData 객체의 높이(이미지의 세로 높이)를 얻어냄
lineCap	선의 끝 모양의 스타일을 지정하거나 얻어냄 끝 모양에는 butt(평평한 끝모양), round(butt+라운드 사각형)가 있음 round와 square가 butt보다 좀 더 길다
lineJoin	두 선이 모서리 부분에서 만났을 때의 모양을 지정하거나 얻어냄 bevel, round, miter가 있음
lineWidth	선의 두께를 지정하거나 얻어냄
miterLimit	최대 miter값을 지정하거나 얻어냄 miter 값은 안쪽 코너에서 바깥쪽 코너간의 거리
shadowBlur	그림자의 퍼짐(번짐) 값을 지정하거나 얻어냄 숫자가 클수록 더 퍼짐
shadowColor	그림자의 색을 지정하거나 얻어냄
shadowOffsetX	도형으로부터 그림자의 수평 거리를 지정하거나 얻어냄 숫자가 커질수록 그림자가 가로로 길어진다
shadowOffsetY	도형으로부터 그림자의 수직 거리를 지정하거나 얻어냄 숫자가 커질수록 그림자가 세로로 길어진다
strokeStyle	도형이나 글자의 테두리선에 사용되는 선 색을 지정하거나 얻어냄
textAlign	텍스트의 맞춤을 지정하거나 얻어냄 center, end, left, right, start가 있다
textBaseline	텍스트의 베이스 라인을 지정하거나 얻어냄 alphabetic, top, hanging, middle, ideographic, bottom이 있다
width	ImageData 객체의 너비(이미지의 가로 너비)를 얻어냄

 

<캔버스의 그리기 관련 메소드들>

메소드	설명
addColorStop()	그러데이션에서 색상과 중단 위치를 설정한다
arc()	호를 그린다
arcTo()	두 탄젠트 사이의 호를 그린다
beginPath()	다각선의 시작 선을 그리거나 현재의 선을 재설정한다
bezierCurveTo()	큐빅 베이저 곡선을 생성한다
clip()	원래의 캔버스 영역으로부터 일부의 영역을 얻어낸다
closePath()	현재의 선을 다각선의 시작점으로 연결한다 도형 등을 그릴 때 마지막 선이 시작점과 연결되어야 도형이 이루어진다 채워진 도형을 그릴 때는 생략해도 된다
createImageData()	빈 ImageData 객체를 생성한다
createLinearGradient()	선형 그러데이션을 생성한다
createPattern()	패턴을 생성한다 패턴 이미지는 repeat, repeat-x, repeat-y, no-repeat를 사용해서 반복 여부를 결정
drawImage()	캔버스 상에 이미지, 동영상, 다른 캔버스 등을 그린다(표시한다)
fill()	도형을 채우기 한다
fillRect()	채우기 된 사각형을 그린다
fillText()	채우기 된 글자를 그린다
getImageData()	ImageData 객체를 리턴한다
isPointPath()	주어진 포인트가 현재의 포인트이면 true값을 리턴한다
lineTo()	다각선/다각형을 그릴 때 선을 추가한다 이렇게 선을 추가해서 다각선/다각형이 만들어진다
measureText()	문자열 객체를 얻어낸다
moveTo()	선을 추가하지 않고 포인트를 이동한다
putImageData()	이미지 데이터를 캔버스에 넣는다 화면에 생성된 이미지 데이터(이미지)를 출력한다
quadraticCurveTo()	이차 베지어 곡선을 생성한다
rect()	사각형을 생성한다
restore()	전에 저장된 경로 상태와 속성을 얻어낸다
rotate()	(도형 등을) 회전한다
save()	현재의 내용을 저장한다 restore()메소드와 쌍으로 사용됨
scale()	(도형 등의) 크기를 조정한다
setTransform()	현재의 트랜스폼을 재설정하고 transform() 메소드가 자동실행된다 setTransform(scaleX, skewX, skewY, scaleY, moveX, moveY)와 같은 형태로 사용한다
stroke()	선을 그린다
strokeRect()	채워지지 않은 사각형을 그린다
strokeText()	채워지지 않은 글자를 그린다
transform()	현재의 트랜스폼을 대체한다 transform(scaleX, skewX, skewY, scaleY, moveX, moveY)와 같은 형태로 사용한다
translate()	캔버스의 (0,0) 위치를 지정한 좌표로 이동한다

 

 

2024.09.02