html5의 캔버스 요소(직사각형, 폴리선, 원 그리기) 사용 방법 소개_html5 튜토리얼 기술

캔버스는 일반적으로 캔버스를 의미합니다. 최근 HTML5를 사용하여 게임을 작성하는 데 관심이 많아져서 그냥 캔버스를 사용했습니다.

저는 이전에 Silverlight와 wpf에서 Canvas를 사용한 적이 있습니다. Silverlight에서 Canvas는 절대 위치 컨테이너이며 모든 컨트롤이 그 안에 배치될 수 있습니다. 그를 통해 캔버스, 그래픽 애플리케이션, GIS 애플리케이션 등을 구축할 수 있습니다.

HTML5에서는 캔버스가 새로운 태그입니다.

코드 복사

코드는 다음과 같습니다.

기본 html 태그의 모든 속성을 갖고 있으며 스타일도 설정할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

또한 특정 속성이 있습니다:

코드 복사

코드는 다음과 같습니다.

여기서 높이와 너비는 이전과 동일합니다. html 태그의 속성이 다르며, 스타일의 높이와 너비도 다릅니다. 이는 주로 캔버스 내 좌표 범위를 나타냅니다. 스타일의 너비와 높이는 캔버스의 실제 표시 크기를 나타냅니다.

예를 들어 다음 캔버스를 정의합니다.

코드 복사

코드는 다음과 같습니다.

그런 다음 캔버스에 좌표 100과 50, 크기 200과 150으로 직사각형을 그립니다. 실제 효과는 아래와 같습니다.

사진 속 캔버스의 크기는 스타일에 따라 600px * 450px로 결정되는데, 캔버스 전체를 채우는 좌표는 괄호 안의 크기에 해당하는 400*300뿐입니다.

캔버스 그리기는 좌표 기준이므로 100, 50의 좌표가 150px, 75px의 화면 좌표로 변환되고, 직사각형의 크기도 200*150에서 화면 크기 300px*225px로 변환됩니다.

아래 코드를 따라 직접 시도해 볼 수 있습니다.

코드 복사

코드는 다음과 같습니다.

<script><br />var context =document.getElementsByTagName("canvas")[0].getContext("2d");<br />context.fillRect(100,50,200,150);<br /></ 스크립트><br /><br /><br /></script>

Canvas에는 몇 가지 다른 속성이 있지만 아직 살펴보지 않았습니다. 또한 getContext()라는 기본 메서드도 있습니다.

캔버스의 DOM 개체를 통해 getContext("2d") 메서드를 호출하여 해당 그리기 개체를 얻을 수 있습니다.

var canvas = document.getElementsByTagName("canvas")[0];
var context = canvas.getContext("2d");
개발자 콘솔에서 이 Drawing2d의 속성과 속성을 볼 수 있습니다. 방법:

fillStyle, stokeStyle, lineCap, 글꼴 및 기타 브러시 스타일 클래스, fillRect, 스트로크Rect, BeginPath, moveTo, lineTo, closePath, 스트로크, 채우기, drawImage 및 기타 그리기 작업 메서드의 속성과 기타 transfrom, save를 포함합니다. 및 기타 방법.

제가 본 몇 가지 속성과 방법에 대해 간략하게 설명하겠습니다.

fillStyle: 색상 값의 HTML 코드일 수 있는 채우기 스타일(예: red: #ff0000, CSS3의 다른 속성이 지원되는지 여부

스트로크 스타일: 선 스타일

글꼴: 글꼴 스타일

fillRect: 함수(x,y,width,height), fillStyle에 따라 직접 직사각형 채우기

StrokeRect: 함수(x, y, 너비, 높이), 직접 스트로크 스타일을 눌러 직사각형 변을 그립니다.

beginPath: 선 그리기를 시작하고 moveTolineToclosePath 등을 사용하여 폴리라인이나 폴리곤을 그립니다

moveTo: function(x,y)는 선의 시작점을 새 좌표로 이동합니다

lineTo:function(x,y)는 현재 지점에서 대상 지점을 그립니다

closePath: 현재 지점에서 시작 지점까지 연결

스트로크: 위 경로에 따라 스트로크 스타일에 따라 폴리라인을 그립니다

fill: 위 경로에 따라 fillStyle에 따라 직사각형을 그립니다.

drawImage: function(image,x,y,width,height)는 Image 객체를 캔버스에 추가합니다. 여기에 이미지 개체가 로드되어 있어야 합니다. 예: var img = new Image();img.src="test.png";img.onload = function(){/*여기에서 이미지를 캔버스에 추가할 수 있습니다*/}

위에서 직사각형을 그리는 방법을 보시면 됩니다:

코드를 복사하세요

코드는 다음과 같습니다 :

context.fillRect(100,50,200,150);

폴리라인 그리기:

코드 복사

코드는 다음과 같습니다.

context.beginPath();
context.moveTo(10,10);
context.lineTo(10,110);
context.lineTo(110,110);
context.lineTo(110,10 );
context.closePath();
context.Stroke();

캔버스에는 그림을 그리는 기능이 있지만 사용자 상호작용에는 약한 것 같습니다. Silverlight 캔버스, .NET 비트맵, html div 및 캔버스 비교:

개인적으로는 캔버스가 비트맵과 더 유사하다고 생각합니다. 물론 비트맵을 브라우저 측에 배치한 버전이기 때문에 더 많은 기능을 구현할 수 있습니다. 캔버스 자체가 달성할 수 있는 기능은 아직 상대적으로 적지만, 이를 기존의 다른 브라우저 측 애플리케이션 기술과 결합하면 확실히 더 좋은 애플리케이션을 만들 수 있습니다.