HTML5 Canvas
- 이전 페이지 HTML Input 양식 속성
- 다음 페이지 HTML5 SVG
canvas 요소는 웹 페이지에서 그래픽을 그리기 위해 사용됩니다。
Canvas는 무엇인가요？
HTML5의 canvas 요소는 웹 페이지에서 이미지를 그리기 위해 JavaScript를 사용합니다。
화면은 사각형 영역입니다. 모든 픽셀을 제어할 수 있습니다。
canvas는 다양한 그리기 경로, 사각형, 원, 문자 및 이미지 추가 메서드를 가지고 있습니다。
Canvas 요소를 생성합니다
HTML5 페이지에 canvas 요소를 추가합니다。
요소의 id, 너비 및 높이를 지정합니다：
<canvas id="myCanvas" width="200" height="100"></canvas>
JavaScript를 통해 그리기
canvas 요소 자체는 그리기 능력이 없습니다. 모든 그리기 작업은 JavaScript 내부에서 완료되어야 합니다：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript는 id를 사용하여 canvas 요소를 찾습니다：
var c=document.getElementById("myCanvas");
그런 다음, context 객체를 생성합니다:
var cxt=c.getContext("2d");
getContext("2d") 객체는 내장된 HTML5 객체로, 다양한 그리기 경로, 사각형, 원, 문자 및 이미지 추가 방법을 제공합니다.
아래 두 줄 코드는 빨간색 사각형을 그립니다:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
fillStyle 메서드는 그림을 빨간색으로 만들고, fillRect 메서드는 형상, 위치 및 크기를 정의합니다.
좌표 이해
상단 fillRect 메서드는 (0,0,150,75) 매개변수를 가집니다.
그림은 캔버스에 150x75의 사각형을 그려서 왼쪽 상단에서 시작합니다 (0,0).
그림과 같이, 캔버스의 X와 Y 좌표는 캔버스에서 그림을 정위치하는 데 사용됩니다.
더 많은 Canvas 예제
아래는 canvas 요소에 그림을 그리는 더 많은 예제입니다:
예제 - 선
시작 위치와 종료 위치를 지정하여 선을 그립니다:
JavaScript 코드:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
canvas 요소:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 귀하의 브라우저는 캔버스 요소를 지원하지 않습니다. </canvas>
예제 - 원형
크기, 색상 및 위치를 정의하여 원을 그립니다:
JavaScript 코드:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
canvas 요소:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 귀하의 브라우저는 캔버스 요소를 지원하지 않습니다. </canvas>
예제 - 변화
사용자가 지정한 색상으로 변화하는 배경을 그립니다:
JavaScript 코드:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
canvas 요소:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 귀하의 브라우저는 캔버스 요소를 지원하지 않습니다. </canvas>
예제 - 이미지
이미지를 캔버스에 배치하십시오:
JavaScript 코드:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
canvas 요소:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> 귀하의 브라우저는 HTML5 캔버스 태그를 지원하지 않습니다. </canvas>
HTML Canvas 강의
캔버스에 대해 더 많은 지식을 배우려면 우리의 사이트를 방문하세요 HTML Canvas 강의.
- 이전 페이지 HTML Input 양식 속성
- 다음 페이지 HTML5 SVG
