LHJ

I'm a FE developer.

1.3 책에서 사용하는 표준 형태

11 Sep 2020 » canvas

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>

  1. 위 예제는 하나의 캔버스를 사용하고 있다.
  2. 자바스크립트에는 캔버스용 변수(canvas)와 캔버스의 콘텍스트용 변수(context) - 두가지 변수가 있다.
  3. document.getElementById()를 사용해 캔버스와 캔버스의 콘텍스트에 대한 참조를 가져오고 있다.

  1. 이 책에서 소개하는 코드는 위에서 언급한 표준 형태를 고수하고 있다.

사용자 에이전트(User Agent)

  1. 캔버스 명세서에서는 canvas 요소의 구현자를 사용자 에이전트로 언급하고 있으며, 때로는 줄여서 UA라고 말한다.
  2. 브라우저뿐만 아니라 소프트웨어에서도 canvas 요소를 사용할 수 있으므로 캔버스 명세서에는 브라우저란 단어 대신 사용자 에이전트란 용어를 사용하고 있다.

  3. 하지만 사용자 에이전트, 또는 UA란 단어는 독자에게 혼란이나 이질감을 줄 수 있다.
  4. 따라서 이 책에서는 canvas 요소의 구현자를 브라우저라고 언급하고 있다.