캔버스 게임 개발 학습 1부: 태그에 대한 첫 소개

요소의 정의부터 시작해 보겠습니다.

<canvas id="myCanvas" width="150" height="150"></canvas>

는 와 매우 유사해 보이지만 유일한 차이점은 src
및 alt
속성을 ​​포함하지 않는다는 것입니다. 여기에는 너비와 높이라는 두 가지 속성만 있으며 둘 다 선택 사항이며 DOM 또는 CSS를 사용하여 설정할 수 있습니다. 너비와 높이가 지정되지 않은 경우 기본값은 너비 300픽셀, 높이 150픽셀입니다. CSS를 통해 캔버스 크기를 조정할 수 있지만 렌더링된 이미지는 레이아웃에 맞게 크기가 조정됩니다. 렌더링 결과가 왜곡되어 보이는 경우 CSS에만 의존하는 대신 캔버스의 너비 및 높이 속성을 명시적으로 지정해 보세요. 닫는 태그가 필요합니다.

요소는 일반 이미지(여백, 테두리, 배경 등)처럼 스타일을 지정할 수 있습니다. 그러나 이러한 스타일은 캔버스에서 생성된 실제 이미지에 아무런 영향을 미치지 않습니다. 다음으로 스타일을 적용하는 방법을 살펴보겠습니다. 스타일을 지정하지 않으면 캔버스는 기본적으로 완전히 투명합니다.

<캔버스>
는 상대적으로 새롭고 Firefox 1.0 및 Internet Explorer와 같은 일부 브라우저에서는 이를 구현하지 않았기 때문에 캔버스를 지원하지 않는 브라우저에 대해 대체 디스플레이 콘텐츠를 제공해야 합니다. 대체 콘텐츠를 캔버스 요소에 직접 삽입하기만 하면 됩니다. 캔버스를 지원하지 않는 브라우저는 캔버스 요소를 무시하고 대체 콘텐츠를 직접 렌더링하는 반면, 이를 지원하는 브라우저는 캔버스를 정상적으로 렌더링합니다. 예를 들어 대체 콘텐츠로 일부 텍스트나 그림을 캔버스에 채울 수 있습니다.

<canvas id="game" width="150" height="150">
  Oh dear, your browser dosen&#39;t support HTML5! Tell you what, why don&#39;t you upgrade to a decent browser - you won&#39;t regret it!</canvas>

<canvas id="clock" width="150" height="150">
  <imgsrc="images/clock.png" width="150" height="150"/>
</canvas>

생성된 고정 크기 그리기 화면은 다음을 통해 하나 이상의 렌더링 컨텍스트(렌더링 컨텍스트)를 엽니다. 표시할 콘텐츠를 제어할 수 있습니다. 현재 유일한 옵션인 2D 렌더링에 중점을 두고 있으며 향후 OpenGL ES 기반 3D 컨텍스트를 추가할 수도 있습니다.

스크립트를 사용하여 그리려면 먼저 캔버스 요소 개체의 getContext
메서드를 통해 얻을 수 있습니다. 시간, 얻은 그리기에는 몇 가지 기능이 있습니다. getContext()
는 해당 유형을 매개변수로 설명하는 값을 허용합니다. getContext()는 CanvasRenderingContext2D 객체를 반환합니다.

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

위의 첫 번째 줄은 getElementById 메서드를 통해 캔버스 개체의 DOM 노드를 가져옵니다. 그런 다음 getContext
메소드를 통해 그리기 작업 컨텍스트를 얻습니다.

캔버스를 지원하지 않는 브라우저에 대체 콘텐츠를 표시하는 것 외에도 스크립트를 사용하여 브라우저가 캔버스를 지원하는지 확인할 수도 있습니다. 방법은 매우 간단합니다. getContext
가 존재하는지 확인하기만 하면 됩니다.

var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

다음과 같은 가장 간단한 코드 템플릿부터 시작하겠습니다(이후 예제에서 사용됨).

  
    
    
    
  
  
    <canvas id="myCanvas" width="150" height="150"></canvas>
  

주의 깊게 보면 페이지가 로드된 후(body 태그의 onload 속성을 설정하여) 한 번 실행되는 draw
라는 함수를 준비한 것을 알 수 있습니다. 물론 이벤트 핸들러 함수에서 호출되는 다른 함수에서도 사용할 수 있습니다.

위 내용은 캔버스 게임 개발 학습의 한 부분입니다. 먼저 태그의 내용을 이해하고, 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 주목하세요!