캔바스 (Canvas)
Canvas 요소
canvas 요소는 웹 페이지에 그래픽을 그려주는 쉽고 강력한 방법을 제공한다. 이 요소는 그래픽을 위한 컨테이너(container) 역할만을 수행한다.
따라서 실제로 그래픽을 그리기 위해서는 자바스크립트(JavaScript) 등의 스크립트 언어를 이용해야 한다.
canvas 요소를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.
|
요소 |
ie |
chrome |
firefox |
safari |
opera |
|
canvas |
9.0 |
4.0 |
2.0 |
3.1 |
9.0 |
Canvas 요소의 속성
canvas 요소는 테두리(border)도 콘텐츠(content)도 없는 웹 페이지 내의 단순한 사각형의 공간이다. 그러므로 반드시 style 속성을 이용하여 캔버스의 크기를 설정해 주어야 한다.
canvas 요소를 스크립트(script)에서 접근하기 위해서는 해당 요소의 id 속성을 이용하면 된다.
예제
<canvas id="drawCanvas" style="width:300px; height:200px; border: 1px solid #993300;">
이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>사각형 그리기
캔버스를 정의한 후에는 스크립트를 이용하여 canvas 요소에 그래픽을 그릴 수 있다.
다음 예제는 스크립트를 이용하여 canvas 요소에 사각형을 그리는 예제이다.
예제
<!DOCTYPE html>
<html lang ="ko">
<head>
<title>HTML5 canvas - fillRect() 함수로 사각형 그리기 </title>
<meta charset="utf-8">
<style type="text/css">
#myCanvas {border:1px solid red;}
</style>
<script type="text/javascript">
function rect(){
//canvas요소에 대한 Context 개체 가져오기
//var canvas = document.getElementById('myCanvas');
//var ctx = canvas.getContext('2d');
var ctx = document.getElementById('myCanvas').getContext('2d');
if(!ctx) {
return;
}
//사각형 그리기
ctx.fillStyle = "red"; //"rgb(255,0,0)";
ctx.strokeRect(10,10,200, 200); //strokeRect(x,y,width,height) ; 테두리만 있는 사각형을 그림
ctx.fillRect(220,10,200, 200);
//fillRect(x,y,width,height) ; 색이 채워진 사각형을 그림
ctx.fillRect(430,10,200, 200);
ctx.clearRect(500,50,100,100);
//clearRect(x,y,width,height) ; 특정영역을 지움
}
</script>
</head>
<body onload="rect();">
<!-- 그림영역 지정 -->
<canvas id="myCanvas" width="640" height="480">
당신의 브라우저는 canvas 요소를 지원하지 않습니다.
</canvas>
</body>
</html> context.strokeRect(10, 10, 250, 130);
context.fillStyle = "rgba(255,0,0,1)";
context.fillRect(20, 20, 200, 100);
context.clearRect(30, 30, 150, 50);위의 예제에서 사각형을 그리는 데 사용된 함수들은 다음 순서대로 인수를 전달 받는다.
- 사각형의 왼쪽 위 꼭짓점의 x좌표
- 사각형의 왼쪽 위 꼭짓점의 y좌표
- 사각형의 너비
- 사각형의 높이
사각형을 그리는데 사용하는 스크립트 함수는 다음과 같다.
|
함수 |
설명 |
|
fillStyle() |
사각형 영역을 채울 색상을 설정함. 색상값만을 사용할 수도 있고, 투명도까지 명시할 수 있음. |
|
fillRect() |
사각형을 그리기 시작할 시작점의 x, y좌표와 사각형의 너비, 높이 등을 설정함. |
|
strokeRect() |
사각형 영역에 테두리를 그릴 때 사용함. |
|
clearRect() |
지정된 사각형 영역을 투명하게 만듦. |
선 그리기
다음 예제는 스크립트를 이용하여 canvas 요소에 선을 그리는 예제이다.
예제
<!DOCTYPE html>
<html lang ="ko">
<head>
<title>HTML5 canvas - 삼각형 그리기 </title>
<meta charset="utf-8">
<style type="text/css">
#myCanvas {border:1px solid red;}
</style>
<script type="text/javascript">
function start(){
//canvas요소에 대한 Context 개체 가져오기
var ctx = document.getElementById('myCanvas').getContext('2d');
if(!ctx) {
return;
}
//삼각형 그리기
//begin
ctx.beginPath(); //경로 그리기 시작
ctx.moveTo(50, 50); //기준 좌표값 이동
ctx.lineTo(200,50); // X, Y 좌표를 사용하여 선 그리기
ctx.lineTo(50,200);
ctx.fill(); //경로 그리기 종료(채움)
//ctx.closePath(); //경로 그리기 종료
//ctx.stroke(); //테두리 그리기
//==========================================================
//오각형 그리기
//begin
ctx.beginPath();
ctx.moveTo(300,50);
ctx.lineTo(150,150);
ctx.lineTo(230,350);
ctx.lineTo(370,350);
ctx.lineTo(450,150);
ctx.closePath();
ctx.stroke();
}
</script>
</head>
<body onload="start();">
<!-- 그림영역 지정 -->
<canvas id="myCanvas" width="640" height="480">
당신의 브라우저는 canvas 요소를 지원하지 않습니다.
</canvas>
</body>
</html>context.moveTo(0, 0);
context.lineTo(300, 100);
context.lineTo(150, 150);
context.stroke();선을 그리는데 사용하는 스크립트 함수는 다음과 같다.
|
함수 |
설명 |
|
moveTo() |
선이 시작될 좌표를 설정함. |
|
lineTo() |
선이 끝나는 좌표를 설정함. |
|
lineTo() |
함수를 연속적으로 사용할 때의 시작 위치는 이전 선 그리기가 끝난 위치로 자동 설정됨. |
|
stroke() |
선 그리기 시작함. |
이러한 선 그리기를 이용하면 도형을 만들 수도 있으며, 만든 도형에 색을 채울 수도 있다.
예제
context.moveTo(0, 0);
context.lineTo(300, 200);
context.lineTo(150, 0);
context.lineTo(0, 0);
context.fillStyle = "#0099FF";
context.fill();
context.stroke();위의 예제에서는 우선 moveTo() 함수와 lineTo() 함수를 이용하여 선 그리기로 도형을 만든다.
그 후 fillStyle() 함수로 원하는 색상을 지정하고나서, fill() 함수를 사용하여 만든 도형에 색상을 칠하게 된다.
원 그리기
다음 예제는 스크립트를 이용하여 canvas 요소에 원을 그리는 예제이다.
예제
<!DOCTYPE html>
<html>
<head>
<title>Html5 Canvas</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script type="text/javascript">
function draw(){
var ctx = document.getElementById('myCanvas').getContext("2d");
//원 그리기
ctx.beginPath();
ctx.arc(100, 100, 50, 0,(Math.PI/180) *360,false);
//ctx.arc(x,y, 반지름, 시작각도, 종료각도, 그리는 방향);
//그리는 방향 : true 이면 시계 반대방향 / false 이면 시계 방향
ctx.fillStyle = "rgb(0, 255, 255)"; //채울 색상
ctx.fill(); //채우기
ctx.stroke(); //테두리
//원호 그리기
ctx.beginPath();
ctx.arc(200, 100, 50, (Math.PI/180)*225 ,(Math.PI/180) *45,false);
ctx.stroke(); //테두리
//부채꼴 그리기 type1
ctx.moveTo(50, 200);
ctx.arc(50,200,50,0, (Math.PI/180)*90,false);
ctx.closePath();
ctx.stroke();
//부채꼴 그리기 type1
ctx.moveTo(200, 200);
ctx.arc(200,200,50,0, (Math.PI/180)*90, true);
ctx.closePath();
ctx.stroke();
}
</script>
</head>
<body onload="draw();">
<canvas id="myCanvas" height="480" width="640">
</canvas>
</body>
</html>context.beginPath();
context.arc(150, 100, 50, 0, 2 * Math.PI);
context.stroke();위의 예제에서 사용된 arc() 함수는 다음 순서대로 인수를 전달 받는다.
- 원의 중심 x좌표
- 원의 중심 y좌표
- 원의 반지름
- 원호를 그리기 시작할 각도
- 원호 그리기를 마칠 각도
원을 그리는데 사용하는 스크립트 함수는 다음과 같다.
|
함수 |
설명 |
|
beginPath() |
도형 그리기를 시작함. |
|
arc() |
원의 중심 좌표와 반지름, 원을 그리기 시작할 시작 위치와 종료 위치의 좌표, 그리는 방향 등을 설정함. |
|
closePath() |
도형 그리기를 마침. |
이러한 원 그리기를 이용하면 원호 또한 간단히 만들 수 있다.
예제
context.beginPath();
context.moveTo(100, 100);
context.arc(100, 100, 120, 0, 45 * Math.PI / 180);
context.closePath();
context.stroke();Math.PI는 원의 원주를 지름으로 나눈 비율(원주율) 값으로 대략 3.14159를 나타낸다.
텍스트(text) 그리기
다음 예제는 스크립트를 이용하여 canvas 요소에 텍스트를 그리는 예제이다.
예제
context.font = "40px Arial";
context.fillText("CANVAS", 50, 90);
context.strokeText("HTML5", 80, 150);위의 예제에서 텍스트를 그리는 데 사용된 함수들은 다음 순서대로 인수를 전달 받는다.
- canvas 요소에 그릴 텍스트의 내용
- 텍스트의 왼쪽 위 꼭짓점의 x좌표
- 텍스트의 왼쪽 위 꼭짓점의 y좌표
텍스트를 그리는데 사용하는 스크립트 함수는 다음과 같습니다.
|
함수 |
설명 |
|
font() |
텍스트의 크기, 폰트(font)와 색상 등을 설정함. |
|
fillText() |
텍스트의 내용과 텍스트를 그리기 시작할 시작 위치의 좌표를 설정함. |
|
strokeText() |
테두리만 있는 텍스트를 그릴 때 사용함. |
그레디언트(Gradient) 그리기
다음 예제는 스크립트를 이용하여 canvas 요소에 선형 그래디언트를 그리는 예제이다.
예제
var gradient = context.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "#FFCC00");
gradient.addColorStop(1, "#FFCCCC");
context.fillStyle = gradient;
context.font = "45px Arial black";
context.fillText("CANVAS", 15, 120);위의 예제에서 사용된 createLinearGradient() 함수는 다음 순서대로 인수를 전달 받는다.
- 선형 그래디언트가 시작하는 점의 x좌표
- 선형 그래디언트가 시작하는 점의 y좌표
- 선형 그래디언트가 끝나는 점의 x좌표
- 선형 그래디언트가 끝나는 점의 y좌표
이렇게 createLinearGradient() 함수를 사용하여 선형 그래디언트를 생성한다.
이때 addColorStop() 함수를 사용하여 그래디언트에 사용될 색상을 명시할 수 있다.
또한, 이렇게 생성된 그래디언트는 fillStyle이나 strokeStyle 속성을 이용하여 그릴 수 있다.
다음 예제는 스크립트를 이용하여 canvas 요소에 원형 그래디언트를 그리는 예제이다.
예제
var gradient = context.createRadialGradient(100, 100, 200, 150, 150, 30);
gradient.addColorStop(0, "black");
gradient.addColorStop(1, "white");
context.fillStyle = gradient;
context.fillRect(0, 0, 300, 300);위의 예제에서 사용된 createRadialGradient() 함수는 다음 순서대로 인수를 전달 받는다.
- 원형 그래디언트가 시작하는 원의 중심 x좌표
- 원형 그래디언트가 시작하는 원의 중심 y좌표
- 원형 그래디언트가 시작하는 원의 반지름
- 원형 그래디언트가 끝나는 원의 중심 x좌표
- 원형 그래디언트가 끝나는 원의 중심 y좌표
- 원형 그래디언트가 끝나는 원의 반지름
그래디언트(gradient)를 그리는데 사용하는 스크립트 함수는 다음과 같다.
|
함수 |
설명 |
|
createLinearGradient() |
선형 그래디언트를 그리기 시작할 시작 위치와 종료 위치의 좌표를 설정함. |
|
createRadialGradient() |
원형 그래디언트를 그리기 시작할 큰 원의 중심 좌표, 반지름과 그래디언트가 끝날 작은 원의 중심 좌표, 반지름 등을 설정함. |
|
addColorStop() |
그래디언트의 색을 설정함. 시작점인 0에서부터 종료점인 1까지 다양한 색 지정이 가능함. |
createLinearGradient() 함수와 createRadialGradient() 함수는 익스플로러 8과 그 이전 버전에서 지원하지 않습니다.
이미지 그리기
다음 예제는 스크립트를 이용하여 canvas 요소에 이미지를 그리는 예제이다.
예제
<p><button onclick="drawImage()">이미지 그리기</button></p>
...
<script>
function drawImage() {
var srcImg = document.getElementById("Monalisa");
context.drawImage(srcImg, 10, 10);
}
</script>위의 예제에서 사용된 drawImage() 함수는 다음 순서대로 인수를 전달 받는다.
- canvas 요소에 그릴 이미지의 주소
- 이미지의 왼쪽 위 꼭짓점의 x좌표
- 이미지의 왼쪽 위 꼭짓점의 y좌표
이미지를 그리는데 사용하는 스크립트 함수는 다음과 같다.
|
함수 |
설명 |
|
drawImage() |
canvas 요소에 그릴 이미지의 주소와 이미지가 그려질 시작 위치를 설정함. |
[세상살이] - 크롬 확장 프로그램으로 마우스 우클릭 해제
크롬 확장 프로그램으로 마우스 우클릭 해제
크롬 확장 프로그램으로 마우스 우클릭 해제 크롬으로 웹서핑을 하다보면 글이나 이미지를 저장하여 필요한 곳에 사용해야 할 일들이 자주 있는데 복사한 내용을 그대로 업로드 하는 사람들이
smarti.tistory.com
언택트 뜻
Untact 뜻 2017년 8월, 김난도 서울대 소비자학과 교수는 연구원들과 함께 매년 발간하는 저서 ‘트렌드 코리아’에 들어갈 내용을 정하기 위한 회의를 열고 있었다. 당시 새롭게 주목받은 기술은
smarti.tistory.com
포스타입, 창작과 수익
POSTYPE (포스타입) : 창작과 수익 '더 자유로운 창작, 더 높은 수익'을 캐치프래이즈로 콘텐츠를 쉽게 사고 또 팔 수 있는 블로그 지향 서비스이다. 높은 판매 수수료와 불리한 계약 조건을 내세웠
smarti.tistory.com
[세상살이] - 구글 메시지를 이용, PC에서 문자 보내기
구글 메시지를 이용, PC에서 문자 보내기
Google 메세지 이용, 내 PC에서 문자 보내기 휴대폰에서 문자를 보낼 때 작은 화면으로 문자를 보낼때 타자속도도 느리고 오타도 많이 발생한다. 장문의 문자를 보낼때는 특히 더 할텐데 내 책상에
smarti.tistory.com
포토샵 PDF 저장하기
포토샵으로 PDF 저장하기를 알아보자 초보자를 위한 PDF 저장하기 Photoshop에서 작업한 문서를 '파일/다른 이름으로 저장' 또는 Ctrl+Shift+S 클릭한다. 위 창이 뜨면 파일형식을 PDF로 지정한다. 위와
smarti.tistory.com
'코딩공부' 카테고리의 다른 글
| CSS 기본 (0) | 2020.10.12 |
|---|---|
| HTML5 API 2 (0) | 2020.10.06 |
| HTML5 API 1 (0) | 2020.10.06 |
| HTML5 그래픽 2 (0) | 2020.10.06 |
| HTML5 멀티미디어 (0) | 2020.10.05 |
| HTML5 기본정리 2 (0) | 2020.10.03 |
| HTML5 기본정리 1 (0) | 2020.10.03 |
| HTML 확장 CSS, Javascript, html과 xhtml (0) | 2020.10.03 |
댓글