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

canvas.width= 400
canvas.height = 300

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

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

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


펜을 가져오는 데는 getContext 메소드가 사용되지만 여기에는 또 다른 매개변수가 있습니다. 2d. 이는 브러시 유형으로 간주할 수 있습니다.
2D가 있으니 3D가 있을까요? 앞으로는 그럴 것 같지만 지금은 아니다. 그럼 먼저 이 2D 펜을 사용해 보겠습니다.
그럼 예비로 펜 몇 개 더 넣어도 될까요? 대답은 '아니요'입니다.
질문하고 싶습니다. 그림을 그릴 때 동시에 몇 개의 펜을 사용하시나요? 나는 99.9%의 사람들이 한 손만 사용할 수 있다고 믿습니다. 샤오롱누와 같은 일부 무술 고수들은 동시에 두 손으로 그림을 그릴 수 있지만, 이는 일반 사람들에게는 매우 비현실적입니다.
이제 html5의 캔버스 태그는 동시에 하나의 펜 사용만 지원하므로 안심하셔도 됩니다!
JS 작성에 더 익숙한 일부 학생은 트릭을 사용하고 싶을 수도 있습니다. 브러시를 얻는 이전 방법을 사용하여 펜을 몇 개 더 얻을 수 있습니다. 이것으로 충분하지 않습니까? !

예:


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

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

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