English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 기본 가이드

HTML5 API

HTML5 미디어

HTML5 그래픽

HTML5 Canvas 경로

HTML5 Canvas 경로는 HTML에서 사용됩니다.5화면에 다양한 유형의 형상(선, 원, 다각형 등)을 그리기 때문에 경로는 HTML에서 사용됩니다.5화면에 다양한 유형의 형상을 그리기

HTML5 Canvas 경로는 일련의 점으로 구성되며, 이 점들 간에 그리기 명령이 있습니다. 예를 들어, 일련의 점들 간에 직선이나 곡선이 있습니다.

HTML에서 사용되는 경로5화면에 다양한 유형의 형상(선, 원, 다각형 등)을 그리기 때문에 이 중요한 중심 개념을 이해하는 것이 매우 중요합니다.

경로를 시작하고 끝내는 것 - Path

use2D상문 함수 beginPath()와는 경로를 시작하고 끝내는 것을 보여줍니다 closePath() 다음과 같이:

var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");context.beginPath();
//　... 경로 그리기 작업
context.closePath();

moveTo()

경로로 그리기 할 때, 사용하는 것은 가상의 '펜' 또는 '지시자'입니다. 가상 지시자는 항상 어떤 점에 위치하고 있습니다. moveTo()를 사용하여2D Context 함수는 가상 지시자 이동을 완료합니다 moveTo(x, y) 다음과 같이:

context.moveTo(10,10);

이 예제에서 지시자를 점10,10

lineTo()

lineTo() 함수는 가상 지시자 위치에서 함수에 전달된 점까지 선을 그립니다. 이는 예제입니다:

context.beginPath();
context.moveTo(10,10);
context.lineTo(50,50);
context.closePath();

이 예제에서 지시자를 점10,10그런 다음 이 점에서 점50,50으로 이동합니다.

lineTo()는 가상의 지시자를 그 선의 끝으로 이동시킵니다. 따라서, 위의 예제에서 지시자는50,50, 그리고 그 점에 그림을 그리도록 지시합니다.

stroke() + fill()

you indicate2D상문이 경로를 그리기 전까지 실제로 경로를 그리지 않습니다. 다음을 호출하여2D상문의 stroke()나 fill()는2D상文中 이 작업을 완료합니다.
이 stroke() 함수는 경로 작업으로 정의된 형상의 외곽선을 그립니다.
이 fill() 함수는 경로 작업으로 정의된 형상을 채웁니다.
이 두 가지 예제에서 stroke()와 fill()를 같은 형상에 적용했습니다:

<canvas id="ex1" width="500" height="75" style="border:　1px solid #cccccc;">
HTML5　Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex1");var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(10,10);
context.lineTo(60,50);
context.lineTo(110,50);
context.lineTo(10,10);
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(100,10);
context.lineTo(150,50);
context.lineTo(200,50);
context.lineTo(100,10);
context.fill();
context.closePath();</script>
테스트해 보세요 ‹/›

이는 위 코드의 실행 결과입니다:

HTML5 Canvas지원안됨

LineWidth

you can use lineWidth 2D상文的 속성 설정 여러 가지 펜 기능으로 그려진 선의 너비입니다. 이는 예제입니다:

context.lineWidth =　10;

위의 예제는 모든 이후 펜 스타일 작업의 선 너비를 설정합니다.10픽셀입니다.
이는 세 가지 선으로, 각 선의 너비는1,5하고10:

HTML5 Canvas지원안됨

선 너비가1시점에서, 선의 추가적인 너비는 중심선 밖에 그려집니다.也就是说,如果您 from10,10부터100,10선을 그립니다. 선 너비는10이 경우, 이 선은10,5시작하여 확장됩니다10,15, 그런 다음 수평으로 확장됩니다100,5하고100,15그곳에서. 사각형처럼.

라인 헤드(lineCap)

경로를 통해 라인을 그리는 경우, 라인의 라인 헤드를 설정할 수 있습니다. 라인 헤드는 라인 끝의 그리기 방식을 정의합니다.
라인 너비는 lineCap을 통해 설정됩니다.2D 컨텍스트의 속성은 다음 값을 취할 수 있습니다.

  • butt

  • round

  • square

이 값 butt는 선 끝이 평평하며 선과 직각입니다.
이 값 round는 반지름이 선 너비 반으로 같은 라운드 각을 가진 라운드 엔드를 생성합니다.
이 값 square는 행 끝에 사각형을 그리며, 사각형의 크기는 line width x line width입니다. / 2
이는 라인 헤드의 그룹 예제입니다. 모든 선의 선 너비는10가장 왼쪽의 선은 lineCap 값 butt를 사용합니다. 중간 선은 lineCap 값 round를 사용합니다. 가장 오른쪽의 행은 lineCap 값 square를 사용합니다.

HTML5 Canvas지원안됨

lineCap의 값 butt와 square는 그리기와의 차이가 어렵게 보입니다. 따라서, butt와 square를 사용하여 가까이에 그려서 차이를 볼 수 있도록了一些示例。위쪽이나 왼쪽은 butt, 아래쪽이나 오른쪽은 square를 사용합니다.

HTML5 Canvas지원안됨

그렇게 보면 lineCap 값에 따라 라인의 끝에 추가적인 사각형을 그리며, 이는 라인이 조금 더 길어 보입니다.

라인 연결(lineJoin)

lineJoin 2D 컨텍스트의 속성은 두 줄을 연결하는 점을 그리는 방법을 정의합니다. 두 줄을 연결하는 점은 '행 연결'이라고 합니다. lineJoin 속성은 다음 값을 가질 수 있습니다:

  • miter

  • bevel

  • round

이는 행 연결을 설정하는 세 가지 코드 예제입니다:

context.lineJoin = "miter";
context.lineJoin = "bevel";
context.lineJoin = "round";

miter 결과 값은 직선을 연결하는 데 사용되는 직선 각을 그립니다.
bevel 결과 값은 직선(직선) 각을 그리기 위해 직선을 연결하는 데 사용됩니다.
round 결과 값은 직선 라운드 각을 그리기 위해 직선을 연결하는 데 사용됩니다.
이는 lineJoin 속성 값으로 사용되는 miter, bevel, round의 세 가지 예제입니다. (좌측부터)

HTML5 Canvas지원안됨

arc()

2D 컨텍스트 기능 arc()가 캔버스에서 원孤를 그립니다.

이 arc() 함수는6파라미터:

  • x: 원의 중심점의 x 좌표

  • y: 원의 중심점의 y 좌표

  • radius: 원의 반지름

  • startAngle: 원의 시작의弧도角

  • endAngle: 원의 끝의弧도角

  • anticlockwise: 삽입 방향이 반시계 방향인지(시계 방향이 아님)를 설정합니다.

이는 코드 예제입니다:

context.lineWidth =　3;
var x =　50;
var y =　50;
var radius =　25;
var startAngle = (Math.PI　/　180)　*　45;
var endAngle = (Math.PI　/　180)　*　90;
var anticlockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
context.stroke();
context.closePath();

이 코드 예제는 원심점이50,50, 반지름이25픽셀,45도까지 이어집니다.180도. 0도에서360도는弧도로 변환됩니다.
이는 화면에 그려진 코드 예제의 모습입니다:

HTML5 Canvas지원안됨

이는 동일한 코드 예제지만 anticlockwise를 true로 설정했습니다:

HTML5 Canvas지원안됨

전체 원을 그리기 위해 간단히 startAngle을 0으로 설정하고 endAngle을2 * Math.PI는(Math.PI / 180) * 360

arcTo()

2D 컨텍스트는arcTo()기능을 사용할 수 있습니다.lineTo()하고기능을 모방합니다.arc()를 건너뛰기 때문에

quadraticCurveTo()

quadraticCurveTo() 함수는 한 점에서 다른 점으로 두 번째 베塞尔 곡선을 그립니다. 이 곡선은 단일 제어점으로 제어됩니다. 이는 코드 예제입니다:

context.lineWidth =　3;
var fromX =　50;
var fromY =　50;
var toX =　100;
var toY =　50;
var cpX =　75;
var cpY =　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.quadraticCurveTo(cpX, cpY, toX, toY);
context.stroke();
context.closePath();

이 코드 예제는 제어점을 사용합니다.75,100(cpX, cpY)을 그려줍니다.50,50부터100,50의 곡선. 결과 곡선은 다음과 같습니다:

HTML5 Canvas지원안됨

화면에 있는 작은 점은 제가 여기서 그린 제어점입니다. 일반적으로 그는 곡선의 일부가 아닙니다.

bezierCurveTo()

bezierCurveTo() 함수는 한 점에서 다른 점으로 세 번째 베塞尔 곡선을 그립니다. 세 번째 베塞尔 곡선은2개의 제어점을 가지고 있으며, 두 번째 베塞尔 곡선은 단일 제어점만 가집니다.1개의 제어점입니다. 이는 코드 예제입니다:

context.lineWidth =　3;
var fromX =　50;
var fromY =　50;
var toX =　300;
var toY =　50;
var cp1X =　100;
var cp1Y =　100;
var cp2X =　250;
var cp2Y =　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

이 코드 예제는 제어점을 사용합니다.100,100(cp1X, cp1Y)과250,100(cp2X, cp2Y)을 그려주는 곡선을 그려줍니다.50,50부터300,50의 곡선. 결과 곡선은 다음과 같습니다:

HTML5 Canvas지원안됨

화면에 있는 두 개의 작은 점은 제가 그린 제어점입니다. 그것들은 그 위치를 보여주기 위해 사용됩니다. 그들은 곡선의 일부로 그려지지 않습니다.
다른 시작점, 끝점 및 제어점을 사용하는 예제입니다:

context.lineWidth =　3;
var fromX =　50;
var fromY =　50;
var toX =　300;
var toY =　50;
var cp1X =　100;
var cp1Y =　10;
var cp2X =　250;
var cp2Y =　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

이는相应的曲线:

HTML5 Canvas지원안됨


그리고, 두 개의 작은 점은 명확히 렌더링할 수 있는 제어점입니다

HTML5 Canvas 변화HTML5 Canvas 그리기면 지우기