캔버스 튜토리얼
<canvar> 요소
<canvas id="tutorial" width="150" height="150"></canvas>
<!-- default width: 300px, height: 150px -->
<!-- 요소는 CSS에 의해 임의로 크기를 정할 수 있지만 렌더링하는 동안 이미지는 레이아웃 크기에 맞게 크기가 조정됩니다. -->
<!-- CSS 크기 지정이 초기 캔버스의 비율을 고려하지 않으면 왜곡되어 나타납니다 . -->
<!-- 만약 렌더링이 왜곡된 것처럼 보이는 경우 -->
<!-- CSS를 사용하지 않고 <canvas> 속성에서 width 및 height 속성을 명시적으로 지정하십시오. -->대체 콘텐츠
<canvas id="stockGraph" width="150" height="150">
current stock price: $3.15 +0.15
</canvas>
<canvas id="clock" width="150" height="150">
<img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>
<!-- 대체 컨텐츠를 제공하는 것은 매우 간단합니다. <canvas>태그 안에 대체 컨텐츠를 삽입합니다. -->
<!-- <canvas>태그 를 지원하지 않는 브라우저는 컨테이너를 무시하고 컨테이너 내부의 대체 콘텐츠를 렌더링 합니다. -->
<!-- <canvas>를 지원하는 브라우저는 컨테이너 내부의 내용을 무시하고 캔버스를 정상적으로 렌더링합니다. -->
<!-- 대체 컨텐츠가 제공되는 방식때문에, <img> 요소와 달리, <canvas> 요소는 닫는 태그(</canvas>)가 필요합니다. -->
<!-- 닫는 태그가 없다면, 문서의 나머지 부분이 대체 컨텐츠로 간주되고 보이지 않을 것입니다. -->렌더링 컨텍스트
<canvas> 엘리먼트는 고정 크기의 드로잉 영역을 생성하고 하나 이상의 렌더링 컨텍스(rendering contexts)를 노출하여, 출력할 컨텐츠를 생성하고 다루게 됩니다.
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
// document.getElementById() 메서드를 호출하여 <canvas> 요소를 표시할 DOM을 검색합니다.
// 요소가 있으면 getContext() 메서드를 사용하여 드로잉 컨텍스트에 액세스 할 수 있습니다.지원여부 검사
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}템플릿 뼈대
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();"> <!-- 문서가 load 이벤트를 수신하여 페이지 로딩이 완료될 때 한번 실행됩니다. -->
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>기본 예제
<!DOCTYPE html>
<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 = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 50, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>예제 결과
반응형
'lang > js' 카테고리의 다른 글
| JavascriptHTMLDialogElement.returnValue (0) | 2019.12.19 |
|---|---|
| Javascript EventTarget() (0) | 2019.12.18 |
| VanillaJS Form serialize() (0) | 2019.12.16 |
| JS Function.method (0) | 2019.12.11 |
| JS Array.Method (0) | 2019.12.10 |