반응형
캔버스<canvas> 요소
HTML의 <canvas>는 웹페이지에서 그래픽적인 것을 그릴 때 사용된다.
<canvas id="test" width="150" height="150"></canvas>
src 및 alt 속성이 없다는 점만 제외하면 <img>요소와 비슷하게 보인다. <canvas> 요소에는 width와 height 두 속성만 존재한다.
<img>요소와 달리, <canvas> 요소는 닫는 태그 </canvas>가 필요하다.
렌더링 컨텍스트
<canvas> 요소는 고정된 크기의 드로잉 영역을 생성하며, 그 영역은 보여질 컨텐츠를 생성하고 다루게될 두가지 이상의 렌더링 컨텍스트를 노출시킨다.(2D, 3D)
캔버스는 처음에 비어있으며, 무언가를 표시하기위해서는 어떤 스크립트가 랜더링 컨텍스트에 접근하여 그리도록해야 한다. <canvas> 요소는 getContext() 메서드를 호출해서, 랜더링 컨텍스트와 그리기 함수들을 사용할 수 있다.
var canvas = document.getElementById("test");
var ctx = canvas.getContext("2d");<canvas> 요소가 있으면 getContext() 메서드를 사용하여 드로잉 컨텍스트에 엑세스가 가능하다.
getContext() 메소드의 존재여부를 활용하여 지원하지 않는 브라우저에 대한 처리를 할 수 있다.
var canvas = document.getElementById("test");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
}else{
//
}
기본 예제
간단한 두 개의 직사각형 그리기
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8"/>
<script type="application/javascript">
function draw(){
var canvas = document.getElementById("canvas");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200, 0, 0)";
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = "rgb(0, 0, 200, 0.5)";
ctx.fillRect(30, 30, 50, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150">
current stock price : ddd
</canvas>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8"/>
<script type="application/javascript">
function draw(){
var canvas = document.getElementById("canvas");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
// Draw a Line
ctx.moveTo(0, 0);
ctx.lineTo(200, 200);
ctx.stroke();
// Draw a Circle
ctx.beginPath();
ctx.arc(75, 75, 40, 0, 2 * Math.PI);
ctx.stroke();
// Draw a Text
ctx.font = "15px Arial";
ctx.fillText("Hello World", 10, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150" style="border:1px solid #000000;"></canvas>
</body>
</html>
(내용 출처 : https://developer.mozilla.org/ko/docs/Web/HTML/Canvas/Tutorial/Basic_usage)
반응형
'프로그래밍 노트 > HTML,CSS' 카테고리의 다른 글
| [HTML] Canvas 화면 지우기 (0) | 2018.09.19 |
|---|
