HTML5 캔버스의 용도는 무엇입니까? HTML5의 최신 캔버스 요소에 대한 자세한 설명은 무엇입니까?
- 寻∝梦원래의
- 2018-08-13 18:52:022503검색
HTML5에는 새로운 요소가 많지만 더 아름다운 웹 페이지를 더 편리하게 만들 수 있도록 하기 위한 것입니다. 이제 아래에서 소개하는 요소를 살펴보겠습니다.
HTML5 Canvas
최종 수정 날짜는 8월 1일입니다. , 2017
차트 및 기타 이미지와 같은 태그 정의 그래픽은 그래픽을 그리려면 스크립트를 사용해야 합니다.
캔버스에 빨간색 직사각형, 그라데이션 직사각형, 색상 직사각형 및 일부 색상 텍스트를 그립니다.
캔버스란 무엇인가요?
HTML5 요소는 그래픽을 그리는 데 사용되며 이는 스크립트(일반적으로 JavaScript)를 통해 수행됩니다.
태그는 그래픽 컨테이너일 뿐이므로 그래픽을 그리려면 스크립트를 사용해야 합니다.
Canva를 사용하면 경로, 상자, 원, 문자를 그리고 다양한 방법으로 이미지를 추가할 수 있습니다.
html5 캔버스는 무엇에 사용되나요?
HTML5 5ba626b379994d53f7acf72a64f9b697 태그는 이미지를 그리는 데 사용됩니다(스크립트, 일반적으로 JavaScript를 통해). 그러나 5ba626b379994d53f7acf72a64f9b697 요소 자체에는 그리기 기능이 없습니다(단순히 그래픽용 컨테이너임). 실제 그리기를 수행하려면 스크립트를 사용해야 합니다. getContext() 메서드는 캔버스에 그리기 위한 메서드와 속성을 제공하는 개체를 반환합니다.
브라우저 지원
Internet Explorer 9+, Firefox, Opera, Chrome 및 Safari는 해당 요소를 지원합니다.
참고: Internet Explorer 8 및 이전 IE 버전은 해당 요소를 지원하지 않습니다.
캔버스 만들기(Canvas )
캔버스는 요소를 통해 그려지는 웹 페이지의 직사각형 상자입니다.
참고: 기본적으로 요소에는 테두리와 내용이 없습니다.
다음과 같은 간단한 예는 다음과 같습니다.
<canvas id="myCanvas" width="200" height="100"></canvas>
참고: 태그는 일반적으로 id 속성(종종 스크립트에서 참조됨)을 지정해야 하며 너비 및 높이 속성은 캔버스의 크기를 정의합니다.
팁: 다음을 사용할 수 있습니다. 여러 개의 5ba626b379994d53f7acf72a64f9b697 요소를 사용하세요.
다음과 같이 스타일 속성을 사용하여 테두리를 추가합니다. ");
그런 다음 컨텍스트 개체를 만듭니다.
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 캔버스 태그를 지원하지 않습니다. c2caaf3fc160dd2513ce82f021917f8b
<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!