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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
