HTML5의 캔버스 태그는 무엇입니까

HTML5의 캔버스 태그는 " "입니다. 캔버스 태그는 그래픽 그리기에 사용됩니다. 그래픽 그리기는 스크립트(일반적으로 JavaScript)를 통해 수행되어야 합니다. 개발자는 다양한 js 메서드를 사용하여 경로, 상자, 원, 문자를 그릴 수 있습니다. 그리고 더.

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

HTML5의 캔버스 태그는 " "입니다.

canvas 태그는 그래픽을 그리는 데 사용됩니다. 이는 직사각형 그래픽 컨테이너일 뿐이며 스크립트(일반적으로 JavaScript)를 통해 수행되어야 합니다.

개발자는 캔버스를 사용하여 경로, 상자, 원, 문자를 그리고 다양한 방법으로 이미지를 추가할 수 있습니다.

캔버스 만들기

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

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

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

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

팁: 다음을 수행할 수 있습니다. HTML 페이지의 여러 요소에서 사용하세요.

경계를 추가하려면 스타일 속성을 사용하세요.

JavaScript를 사용하여 이미지 그리기

캔버스 요소 자체에는 그리기 기능이 없습니다. 모든 그리기 작업은 JavaScript 내에서 수행되어야 합니다.

HTML 코드:

 您的浏览器不支持 HTML5 canvas 标签。 

javascript 코드:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);

예제 분석:

먼저 요소를 찾습니다.

var c=document.getElementById("myCanvas");

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

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

getContext(“2d”)개체는 경로, 직사각형, 원, 문자 그리기 및 이미지 추가를 위한 여러 메서드가 포함된 내장 HTML5 개체입니다.getContext(“2d”)对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);

设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。

fillRect(x,y,width,height)

您的浏览器不支持 HTML5 canvas 标签。

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

좌표 예시

아래 그림과 같이 캔버스의 X, Y 좌표를 사용하여 캔버스에 그림을 배치합니다. 마우스가 움직이는 직사각형 프레임에 위치 좌표가 표시됩니다.

• 캔버스에 선을 그리려면 다음 두 가지 방법을 사용합니다.

• moveTo(x,y) 선의 시작 좌표 정의

HTML 코드:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();

javascript 코드:

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

캔버스에 원을 그리려면 다음 자바스크립트 메소드를 사용합니다.

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();

매개변수 값:

팁: arc()를 통해 원을 만들어야 하는 경우 시작 각도를 0으로 설정하고 끝 각도를 2*Math.PI로 설정하세요.

팁: 캔버스에 실제 호를 그리려면 스트로크() 또는 채우기() 메서드를 사용하세요.

• 중심: arc(100,75,50,0Math.PI,1.5Math.PI)

• 시작 각도: arc(100,75,50,0,1.5*Math.PI)

(학습 영상 공유:html 영상 튜토리얼,웹 프론트엔드)

위 내용은 HTML5의 캔버스 태그는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!