HTML5 캔버스의 용도는 무엇입니까? HTML5의 최신 캔버스 요소에 대한 자세한 설명은 무엇입니까?-H5 튜토리얼-php.cn

HTML5 캔버스의 용도는 무엇입니까? HTML5의 최신 캔버스 요소에 대한 자세한 설명은 무엇입니까?

寻∝梦

풀어 주다： 2018-08-13 18:52:02

원래의

2549명이 탐색했습니다.

HTML5에는 새로운 요소가 많지만 더 아름다운 웹 페이지를 더 편리하게 만들 수 있도록 하기 위한 것입니다. 이제 아래에서 소개하는 요소를 살펴보겠습니다.

HTML5 Canvas

최종 수정 날짜는 8월 1일입니다. , 2017

차트 및 기타 이미지와 같은 태그 정의 그래픽은 그래픽을 그리려면 스크립트를 사용해야 합니다.

캔버스에 빨간색 직사각형, 그라데이션 직사각형, 색상 직사각형 및 일부 색상 텍스트를 그립니다.

캔버스란 무엇인가요?

HTML5 요소는 그래픽을 그리는 데 사용되며 이는 스크립트(일반적으로 JavaScript)를 통해 수행됩니다.

태그는 그래픽 컨테이너일 뿐이므로 그래픽을 그리려면 스크립트를 사용해야 합니다.

Canva를 사용하면 경로, 상자, 원, 문자를 그리고 다양한 방법으로 이미지를 추가할 수 있습니다.

html5 캔버스는 무엇에 사용되나요?

HTML5

브라우저 지원

Internet Explorer 9+, Firefox, Opera, Chrome 및 Safari는 해당 요소를 지원합니다.

참고: Internet Explorer 8 및 이전 IE 버전은 해당 요소를 지원하지 않습니다.

캔버스 만들기(Canvas )

캔버스는 요소를 통해 그려지는 웹 페이지의 직사각형 상자입니다.

참고: 기본적으로 요소에는 테두리와 내용이 없습니다.

다음과 같은 간단한 예는 다음과 같습니다.

<canvas id="myCanvas" width="200" height="100"></canvas>

로그인 후 복사

참고: 태그는 일반적으로 id 속성(종종 스크립트에서 참조됨)을 지정해야 하며 너비 및 높이 속성은 캔버스의 크기를 정의합니다.

팁: 다음을 사용할 수 있습니다. 여러 개의

다음과 같이 스타일 속성을 사용하여 테두리를 추가합니다. ");

그런 다음 컨텍스트 개체를 만듭니다.

var ctx=c.getContext("2d");

getContext("2d") 이 개체는 다양한 그리기 경로가 포함된 내장 HTML5 개체입니다. 직사각형, 원, 문자 및 추가 이미지 방법.

다음 두 줄의 코드는 빨간색 직사각형을 그립니다.

ctx.fillRect(0,0,150,75)

CSS 색상이 될 수 있는 fillStyle 속성을 설정합니다. 그라데이션 또는 패턴. 기본 fillStyle 설정은 #000000(검은색)입니다.

fillRect(x,y,width,height) 메서드는 직사각형의 현재 채우기 방법을 정의합니다.

캔버스 좌표

캔버스는 2차원 격자입니다.

캔버스 왼쪽 상단의 좌표는 (0,0)

위의 fillRect 메소드에는 (0,0,150,75)의 매개변수가 있습니다.

의미: 캔버스에 왼쪽 위 모서리(0,0)부터 시작하여 150x75 직사각형을 그립니다.

Canvas - Path

Canvas에 선을 그리려면 다음 두 가지 방법을 사용합니다.

moveTo(x,y)는 선의 시작 좌표를 정의하고

lineTo(x,y)는 끝을 정의합니다. 선의 좌표

선을 그리려면 스트로크()와 같은 "잉크" 방법을 사용해야 합니다.

이것은 예입니다:

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

로그인 후 복사

캔버스에 원을 그리려면 다음 방법을 사용합니다:

arc(x,y,r,start,stop )

사실 원을 그릴 때 스트로크() 또는 채우기()와 같은 "잉크" 메서드를 사용합니다.

또 다른 예:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>

로그인 후 복사

브라우저에서는 이를 사용합니다. HTML5 캔버스 태그를 지원하지 않습니다.

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

로그인 후 복사

Canvas - Text

캔버스를 사용하여 텍스트를 그립니다. 중요한 속성과 메서드는 다음과 같습니다.

font - 글꼴 정의

fillText(text,x,y) - 캔버스에 단색 텍스트를 그립니다.

StrokeText(text,x,y) - 캔버스에 속이 빈 텍스트를 그립니다.

Canvas - Gradient

Gradient는 직사각형, 원, 선, 텍스트 등으로 채워질 수 있습니다. 다양한 모양은 다양한 색상으로 정의될 수 있습니다.

캔버스 그라데이션을 설정하는 방법에는 두 가지가 있습니다.

createLinearGradient(x,y,x1,y1) - 선 그라데이션 만들기

createRadialGradient(x,y,r,x1,y1,r1) - 경로 만들기 방향 /원형 그라데이션

그라디언트 개체를 사용할 때는 두 개 이상의 중지 색상을 사용해야 합니다.

addColorStop() 메서드는 색상 정지점을 지정하며 매개변수는 0~1의 좌표로 설명됩니다.

그라디언트를 사용하고 fillStyle 또는 스트로크스타일 값을 그라디언트로 설정한 다음 모양을 그립니다. 직사각형, 텍스트, 선 등이 있습니다.

【관련 추천】

HTML의 기본 요소로 HTML을 처음부터 배울 수 있습니다

HTML5의 새로운 태그 센트

위 내용은 HTML5 캔버스의 용도는 무엇입니까? HTML5의 최신 캔버스 요소에 대한 자세한 설명은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!