HTML5 캔버스 드로잉 자습서 (1) - 그리기에 대한 기본 지식

댓글 : 캔버스는 캔버스를 의미합니다. HTML5의 캔버스는 실제 생활의 캔버스와 매우 유사합니다. 따라서 그것을 실제 캔버스로 취급하면 이해 가속화 될 수 있습니다. 캔버스 그림을 배우려면 JavaScript 기반이 있어야합니다. 나는 많이 말하지 않고 요점에 도달 할 것입니다.

또한 그림을 그리면 이미지에는 항상 몇 가지 용어와 지식 포인트가 있으므로 그림이나 예술을 만드는 경험이 있다면 캔버스를 배우는 것이 더 쉽습니다.

캔버스는 캔버스를 의미합니다. HTML5의 캔버스는 실제 생활의 캔버스와 매우 유사합니다. 따라서 그를 유형의 캔버스로 보는 것은 이해력을 높일 수 있습니다.

캔버스

우선 캔버스로 그리려면 캔버스가 필요합니다. 책장에 캔버스가 없다면 롤을 구입하여 넣을 수 있습니다. 물론, 우리는 웹 페이지에 돈을 쓸 필요가 없습니다.

<canvas> 브라우저는 캔버스를 지원하지 않습니다 </canvas>

태그의 텍스트는 캔버스를 지원하지 않는 브라우저에 대한 텍스트이며 지원되는 브라우저는 결코 보이지 않습니다.

이 캔버스의 특성을 언급해야합니다. 그것은 두 개의 기본 특성, 즉 너비와 높이를 가지고 있습니다. 동시에 HTML 요소이기 때문에 CSS를 사용하여 너비와 높이를 정의 할 수도 있습니다. 그러나주의를 기울여야합니다. 자체 너비와 높이는 CSS를 통해 정의 된 너비와 높이와 다릅니다!

우리는 JS를 사용하여 다음과 같이 캔버스의 너비와 높이를 변경합니다.

Canvas.width = 400

Canvas.height = 300

그러나 CSS를 작동하여 JS를 사용하여 캔버스의 너비와 높이를 변경하면 다음과 같습니다.

canvas.style.width = '400px'

canvas.style.height = '300px'

문법적 차이가 매우 분명하다는 것을 알 수 있습니다. 실제로 차이가 더 분명합니다.

그들 사이의 차이점은 무엇입니까?

예를 들어, 캔버스 너비의 경우 캔버스의 왼쪽에 수직선을 100 픽셀로 그립니다. 현재 캔버스 자체의 너비를 500으로 설정하는데, 이는 캔버스의 오른쪽 절반을 클릭하는 것과 같습니다. 그러나 현재 수직선의 너비는 여전히 100입니다.

그러나 CSS를 사용하여 캔버스의 너비를 500으로 변경하면 캔버스를 1000에서 500으로 압출하는 것과 같습니다. 따라서 수직선의 너비는 50이됩니다.

(이것은 단지 이론적 인 상황 일뿐입니다. 실제로 캔버스의 너비를 설정할 때, 그려진 내용이 제거됩니다.)

캔버스의 폭과 높이는 캔버스 자체의 속성이며 CSS가 제공하는 너비와 높이는 스케일링으로 간주 될 수 있습니다. 당신이 너무 자연스럽게 확장하면, 캔버스의 그래픽은 당신에게 인식 할 수 없을 수 있습니다.

따라서 제안이 있습니다. 특별한 상황에서는 CSS를 사용하여 캔버스의 너비와 높이를 정의하지 마십시오.

캔버스에는 그것을 가지고 있으며 이제 우리는 그것을 꺼내고 있습니다.

var cvs = document.getElementById ( 'cvs');

봐, 그것은 다른 요소를 얻는 것과 정확히 동일하다.

브러시

이제 캔버스를 이미 사용할 수있게되었으므로, 그것을 낙서하고 싶습니다. 물론 펜도 필요합니다. 펜을 얻는 방법은 다음과 같습니다.

var ctx = cvs.getContext ( '2d'); getContext 메서드가 펜을 잡는 데 사용되는 경우, 여기에는 다른 매개 변수가 있습니다 : 2d. 이것이 무엇을 의미합니까? 이것은 브러시 유형으로 간주 될 수 있습니다.

2D가 있으므로 3D가 있습니까? 미래에는 아마도있을 것이지만 지금은 아닐 것입니다. 이 2D 펜을 먼저 사용해 봅시다.

그래서 우리는 더 많은 펜을 더 많이 넣을 수 있습니까? 대답은 아니오입니다.

질문을하고 싶습니다 : 그림을 그리는 동안 동시에 몇 개의 펜을 사용합니까? 나는 99.9%의 사람들이 하나만 사용할 수 있다고 생각합니다. Xiaolongnu와 같은 일부 무술 마스터는 동시에 양손으로 그릴 수 있지만, 이것은 평범한 사람들에게 매우 비현실적입니다.

따라서 HTML5 캔버스 태그는 동시에 하나의 펜을 사용하는 것만 지원하기 때문에 이제 안심할 수 있습니다!

JS에 익숙한 일부 학생들은 영리하기를 원할 수도 있습니다. 나는 이전 방식으로 브러시를 얻는 방법을 사용하여 펜을 몇 개 더 얻는다. 충분하지 않습니까? !

예를 들어:

var con = cvs.getContext ( '2d');

var ctx = cvs.getContext ( '2d');

하하하, 성공한 것 같습니다. 나는 시험 전에 그렇게 생각했지만 사실, 이것은 단지 환상 일뿐입니다!

펜 중 하나를 빨간 잉크로 담그고 다른 펜도 빨간색 잉크로 자동으로 담그는 것을 발견했습니다! 두 펜은 하나이기 때문에! 못쓰게 만들다.

다른 색상을 그릴 필요가 있다면,이 독특한 펜을 새로운 색상으로 계속 담그는 방법입니다.

이것은 실제로 이점이 아니며, 결함이며, 앞으로 경험할 것입니다.

동등 어구

2D 세계는 비행기입니다. 평면의 점을 결정하려면 X 좌표와 y 코디네이트의 두 값이 필요합니다. 이것은 매우 중요한 기본 개념입니다.

캔버스의 원점은 플래시와 같은 왼쪽 상단 코너입니다. 그러나 그렇게 성가신 것은 수학의 기원이 왼쪽 하단 모서리라는 것입니다. 이것...

그림에 대한 몇 가지 기본 지식

우선, 어떤 종류의 좌표 변화가 어떤 선을 그릴 지 알아야합니까? 예를 들어, x 좌표가 커지고 y 좌표가 변경되지 않은 상태로 유지되면 수평선을 그릴 수 있습니다. y 좌표가 변경되지만 x 좌표는 변경되지 않으면 수직선을 그릴 수 있습니다.

물론 대각선, 왼쪽 대각선 선 및 오른쪽 대각선도 있습니다. 당신이 그림을 비교할 수 있다면, 대부분의 사람들은 한 번에 그림을 이해할 수 있습니다. 코드로 그리는 것이 더 우울하며 논리적 사고를 통해서만 생각할 수 있습니다.

지금 라인에 대해 혼란스러워하면 걱정하지 마십시오. 학습 과정에서 자연스럽게 이해할 수 있습니다.

다른

캔버스는 실제 캔버스와 다른 기능을 가지고 있으며, 이는 기본적으로 투명하며 배경색이 없다는 것입니다. 이것은 대부분 매우 중요합니다.