Html5 Canvas 예비 학습 노트(1) - 직사각형 그리기

canvas 요소는 이전 Html과 비교하여 Html5의 새로운 기능입니다. , 이 블로그 게시물에서는 이 구성 요소의 적용, 특히 웹 게임 개발에서의 적용에 대해 연구할 것입니다.

canvas 구성 요소는 이전 table 및 p 구성 요소와 유사하며 외부 플러그인 없이 실행할 수 있습니다. html을 사용하고 j2me 개발과 유사한 2D 렌더링 컨텍스트 API(2Drender 컨텍스트 API)를 사용하세요. android의 그래픽 및 android의 캔버스

브러시를 호출할 수 있습니다. 자신만의 그리는 방법.

캔버스를 다음과 같이 정의할 수 있습니다.

<canvas id="canvas" width="400" height="400"> </canvas>

Canvas는 2D 렌더링 컨텍스트, 2D의 래퍼로 사용됩니다. 렌더링 컨텍스트는 캔버스 캔버스를 기반으로 하는 "브러시"입니다. 왼쪽 위 모서리를 원점으로 하는 평면 직교 좌표계(0, 0)를 사용합니다. 오른쪽으로 갈수록 x의 좌표값이 증가하고, 아래로 갈수록 y의 값이 증가하게 됩니다. j2me 캔버스와 매우 유사합니다.

자, 몇 가지 기본 개념을 소개한 후 첫 번째 Html5 Canvas를 먼저 구축하겠습니다. 무엇보다도 렌더링은 다음과 같습니다

아주 간단합니다. 하나의 예는 아래 코드를 살펴보겠습니다.

그 중 canvas라는 레이블이 있습니다. canvas 캔버스를 정의하지만 script 태그 부분은 js<입니다. 🎜> 코드 부분, 다음 부분은 렌더링 컨텍스트를 얻는 것입니다:

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

는 먼저 canvas 요소를 얻은 다음 <🎜를 얻습니다. >2d렌더링된 컨텍스트.

다음 코드는 직사각형 부분을 그리는 코드입니다.

context.fillStyle = '#000000';
context.fillRect(50, 50, 100, 100);

먼저 색상을 설정한 후 그립니다. 4개의 매개변수는 시작점의 가로 및 세로 좌표와 너비와 높이

위 내용은 Html5 Canvas 사전 학습 노트(1)-직사각형 그리기의 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!