1.3 책에서 사용하는 표준 형태
<!DOCTYPE html>
<html>
<head>
<title>A Simple Canvas Example</title>
<style>
body { background-color: #ddd }
#canvas { margin: 10px; padding: 10px; background-color: #fff; border: thin inset #aaa; }
</style>
</head>
<body>
<canvas id="canvas" width="600" height="300">
Canvas not supported
</canvas>
<script>
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
// 콘텍스트 사용..
</script>
</body>
</html>
- 위 예제는 하나의 캔버스를 사용하고 있다.
- 자바스크립트에는 캔버스용 변수(canvas)와 캔버스의 콘텍스트용 변수(context) - 두가지 변수가 있다.
document.getElementById()
를 사용해 캔버스와 캔버스의 콘텍스트에 대한 참조를 가져오고 있다.
- 이 책에서 소개하는 코드는 위에서 언급한 표준 형태를 고수하고 있다.
사용자 에이전트(User Agent)
- 캔버스 명세서에서는
canvas
요소의 구현자를 사용자 에이전트로 언급하고 있으며, 때로는 줄여서 UA라고 말한다.브라우저뿐만 아니라 소프트웨어에서도
canvas
요소를 사용할 수 있으므로 캔버스 명세서에는 브라우저란 단어 대신 사용자 에이전트란 용어를 사용하고 있다.- 하지만 사용자 에이전트, 또는 UA란 단어는 독자에게 혼란이나 이질감을 줄 수 있다.
- 따라서 이 책에서는
canvas
요소의 구현자를 브라우저라고 언급하고 있다.