html5 캔버스 그리기 튜토리얼(1) - Drawing_html5 튜토리얼 기술에 대한 기본 지식

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

캔버스는 캔버스를 뜻합니다. Html5의 캔버스는 실제 캔버스와 매우 유사합니다. 그래서 물리적인 캔버스로 보면 이해가 더 빨라질 수 있습니다.

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

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

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

레이블에 있는 텍스트는 캔버스를 지원하지 않는 브라우저용이며, 이를 지원하는 브라우저에서는 절대 볼 수 없습니다.
이 캔버스의 특성에 대해 이야기할 필요가 있습니다. 즉, 너비와 높이라는 두 가지 속성이 동시에 HTML 요소이기 때문에 CSS를 사용하여 너비와 높이를 정의할 수도 있습니다. 그러나 수천만 개의 너비와 높이는 CSS를 통해 정의된 너비와 높이와 다릅니다.
JS를 사용하여 캔버스의 너비와 높이를 다음과 같이 변경합니다.

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

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 좌표 두 값이 필요합니다. 이것은 매우 중요한 기본 개념이다.
캔버스의 원점은 플래시와 마찬가지로 왼쪽 상단입니다. 그런데 짜증나는 것은 수학의 원점이 왼쪽 하단에 있다는 것이다. 이건... 버릇이라고 할 수 밖에 없습니다

그림의 기본상식
우선 어떤 좌표변화가 무엇을 그리는지 알아야 합니다. 윤곽? 예를 들어, x 좌표가 커졌으나 y 좌표가 변하지 않으면 수평선을 그릴 수 있고, y 좌표가 변하고 x 좌표가 변하지 않으면 수직선을 그릴 수 있습니다.
물론 슬래시, 왼쪽 슬래시, 오른쪽 슬래시 등도 있습니다. 그림과 비교해 보면 대부분의 사람들이 한눈에 이해할 수 있지만 코드로 그리는 것이 더 우울합니다. 논리적 사고에 의존하십시오.
지금 대사가 헷갈리더라도 걱정하지 마세요. 배우다 보면 자연스럽게 이해하게 될 거예요.

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