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

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

寻∝梦

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

원래의

2501명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

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