HTML5 캔버스 그리기 튜토리얼 사례 분석_html5 튜토리얼 기술

모두가 Canvas를 HTML5의 새로운 레이블이라고 부르지만 Canvas는 HTML 언어에 대한 새로운 지식인 것처럼 보이지만 사실 Canvas 그리기는 JavaScript를 통해 이루어집니다. 따라서 캔버스 드로잉을 배우려면 자바스크립트 기초가 있어야 합니다.
그리고 드로잉에 관해서는 항상 이미지 용어와 지식 포인트가 있기 때문에 드로잉이나 미술 경험이 있다면 캔버스를 배우는 것이 더 쉬울 것입니다.
캔버스는 캔버스를 뜻합니다. Html5의 캔버스는 실제 캔버스와 매우 유사합니다. 그래서 물리적인 캔버스로 보면 이해가 더 빨라질 수 있습니다.

캔버스
캔버스로 그림을 그리려면 우선 "캔버스"가 필요합니다. 책장에 캔버스가 없으면 롤을 사서 거기에 넣어도 됩니다. 물론, 웹페이지에서 구매하기 위해 돈을 쓸 필요는 없습니다.

코드 복사 코드는 다음과 같습니다.

브라우저가 캔버스를 지원하지 않습니다

레이블에 있는 텍스트는 캔버스를 지원하지 않는 브라우저용이며, 이를 지원하는 브라우저에서는 절대 볼 수 없습니다.


참고: 이 캔버스의 특성을 언급할 필요가 있습니다. IMG와 마찬가지로 너비와 높이라는 두 가지 기본 속성도 동시에 가지고 있습니다. 요소이므로 CSS를 사용하여 너비와 높이를 정의할 수도 있지만 자신의 너비와 높이는 CSS를 통해 정의된 너비와 높이와 다릅니다. JS를 사용하여 다음과 같이 Canvas의 기본 너비와 높이를 변경합니다.

코드를 복사합니다. 코드는 다음과 같습니다.

canvas.width= 400
canvas.height = 300

그러나 JS를 사용하여 Canvas의 너비와 높이를 변경하는 작업은 다음과 같습니다. CSS는 다음과 같습니다.

코드 복사코드는 다음과 같습니다.

캔버스 .style.width = '400px'
canvas.style.height = '300px'

문학적 차이가 확연한 것을 알 수 있습니다. 실제로 그 차이는 더 분명합니다.
그 둘의 차이점은 무엇인가요?
예를 들어 너비가 1000픽셀인 캔버스의 경우 너비가 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%의 사람들이 한 손만 사용할 수 있다고 믿습니다. 샤오롱누와 같은 일부 무술 고수들은 동시에 두 손으로 그림을 그릴 수 있지만, 이는 일반 사람들에게는 매우 비현실적입니다.
이제 html5의 캔버스 태그는 동시에 하나의 펜 사용만 지원하므로 안심하셔도 됩니다!
JS 작성에 더 익숙한 일부 학생은 트릭을 사용하고 싶을 수도 있습니다. 브러시를 얻는 이전 방법을 사용하여 펜을 몇 개 더 얻을 수 있습니다. 이것으로 충분하지 않습니까? !

예:

코드 복사

코드는 다음과 같습니다. :

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

하하하하. 성공할 수는 있겠지만 시험 전에는 그렇게 생각했는데 사실은 착각이었어요!
펜 중 하나를 빨간 잉크에 담그면 다른 펜도 자동으로 빨간 잉크에 담그는 것을 발견했기 때문입니다! 두 개의 펜은 하나이기 때문이죠! 못쓰게 만들다.
다른 색을 그려야 한다면 이 유일한 "펜"을 새로운 색에 계속 담그는 것이 방법입니다.
이것은 사실 장점이 아니라 앞으로 깨닫게 될 결점입니다.

좌표
2차원 세계는 평면 위의 점을 결정하려면 x 좌표와 y 좌표 두 값이 필요합니다. 이것은 매우 중요한 기본 개념이지만, 모두가 수학을 공부했기 때문에 자세한 내용은 다루지 않겠습니다.
캔버스의 원점은 플래시와 마찬가지로 왼쪽 상단입니다. 그런데 짜증나는 것은 수학의 원점이 왼쪽 하단에 있다는 것이다. 이건... 그냥 익숙해졌다고 밖에 할 수 없네요

기타
캔버스의 특징 중 하나가 실제 캔버스와 다른 점은 기본적으로 투명하고, 배경색이 없습니다. 이것은 대부분의 경우 매우 중요합니다.