초보자 캔버스 <1부 - 기초>

HTML5 표준이 나온 지 오래됐지만 현재는 Canvas가 많이 사용되지 않는 것 같습니다. 매우 중요한 이유는 Canvas의 표준이 완전히 결정되지 않았으며 프로덕션 환경에서 대규모로 사용하기에 적합하지 않다는 것입니다. 그러나 Canvas의 장점도 매우 분명합니다. 예를 들어 많은 수의 요소가 포함된 차트를 그릴 때 SVG는 성능 문제로 인해 작업을 수행하지 못하는 경우가 많습니다. 효과는 비교적 눈부셨지만 각 아바타가 DOM이고 애니메이션이 CSS3로 제어되어 성능이 매우 낮기 때문에 실패했습니다. 또한, 하드웨어 성능이 향상되면서 점차적으로 웹 페이지에서도 동영상 스크린샷, 이미지 처리 등의 기능이 구현될 수 있게 되었습니다. 대부분의 웹사이트에서는 Flash를 사용하지만, Mac 컴퓨터에서는 Flash의 성능이 높지 않기 때문에 추가적인 학습이 필요합니다. 지식. . Canvas는 그리기에 JavaScript를 직접 사용하고 Mac에 친화적이므로 Flash의 후속 제품이라고 볼 수 있습니다.

캔버스 사용

<br/>

그런데, 캔버스란 정확히 무엇일까요?

캔버스(Canvas)는 영어로 '캔버스'를 뜻하는데 여기서 언급한 캔버스는 개발자가 일련의 그래픽을 그릴 수 있는 HTML5의 새로운 요소다. Canvas가 HTML 파일에 작성되는 방식은 매우 간단합니다.

e50e883efb7830b88c9f0d172e39c8cfc2caaf3fc160dd2513ce82f021917f8b

id 속성은 모든 HTML 요소에서 사용할 수 있습니다. Canvas에는 마지막 두 속성(각각 너비와 높이 제어)만 있고 다른 속성은 없습니다. 호환성에 대해 CanIUse는 현재 사용자가 사용하는 브라우저의 90%에서 기본 기능을 지원하므로 대부분의 경우 안심하고 사용할 수 있다고 위에서 언급했습니다.

Canvas에 포함된 너비 및 높이 속성을 사용해야 합니다. CSS를 사용하여 제어하면 Canvas가 변형되기 때문입니다. PhptpShop과 비교해 볼 수 있습니다. 후자는 "이미지 크기"를 변경하는 반면 전자는 "캔버스 크기"를 변경하는 올바른 방법입니다. 예를 들어 다음 그림은 세 장의 그림을 가로로 이어붙인 것입니다. 가장 왼쪽의 검은색 상자는 50px * 50px 크기의 원본 그림이고, 가운데는 이미지 크기를 100px * 100px로 변경한 효과입니다. 하지만 이미지 자체의 경우 좌표 범위가 더 커지지 않았다고 합니다. 가장 오른쪽이 올바른 100px * 100px Canvas입니다.

캔버스 대부분의 그리기 방법은 5ba626b379994d53f7acf72a64f9b697 태그와 관련이 없으며 이를 작동하려면 JavaScript가 필요합니다. 이것이 바로 Canvas API입니다.

먼저 이 요소를 얻습니다:

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

그런 다음 메소드 API 입구를 통해 모든 Canvas를 얻습니다.

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

2D를 보면 설레고 3D가 생각나시나요? 3D를 작성할 수 있는 방법은 없지만 3D 세계로의 문을 열고 싶다면 canvas.getContext('webgl')를 작성하면 됩니다. 하지만 WebGL은 OpenGL ES 2.0을 기반으로 한 표준 집합으로, 본 글과는 전혀 다르기 때문에 여기서는 다루지 않겠습니다.

캔버스의 기본 개념

좌표

는 수학에서 흔히 사용하는 데카르트 좌표계와는 다릅니다. 캔버스의 좌표계는 컴퓨터에서 흔히 사용되는 좌표계입니다. 다음과 같습니다:

캔버스의 왼쪽 위 모서리는 (0,0)이고 x는 오른쪽으로 증가하고 y는 아래쪽으로 증가하며 x와 y는 모두 정수입니다( 계산 과정은 정수가 아니며 그릴 때 정수로 처리됩니다.) 단위는 픽셀입니다.

그리기

모두의 향수를 불러일으키세요. 어렸을 때 얼마나 많은 학생들이 로고 언어를 가지고 놀았는지 모르겠습니다. 그 안에는 작은 거북이가 보드 위를 걷고, 그림을 그리고, 펜을 들고, 펜을 내려 놓도록 제어할 수 있습니다. Canvas에서도 마찬가지입니다. 브러시의 움직임과 그리기를 제어해야 합니다. 하지만 Canvas는 좀 더 발전된 기능으로 일부 기능을 사용하면 브러시 위치를 제어하지 않고도 직접 그림을 그릴 수 있습니다.

캔버스의 기본 그래픽

위에 정의된 ctx 변수를 통해 많은 흥미로운 작업을 수행할 수 있습니다. 먼저 몇 가지 기본 그래픽을 그리는 방법을 살펴보겠습니다.

선

브러시를 특정 지점으로 이동하도록 지정하고, 브러시에게 현재 지점에서 다른 지점으로 그리도록 지시합니다. 브러시를 움직이게 하고 여러 번 그리게 한 후 최종적으로 화면에 균일하게 출력할 수 있습니다. 예시는 다음과 같습니다.

ctx.moveTo(10, 10);
ctx.lineTo(150, 50);
ctx.lineTo(10, 50);
ctx.moveTo(10, 20);
ctx.lineTo(40, 70);
ctx.stroke();

위 코드에서 lineTo는 라인을 생성하는 데 사용되는 함수입니다. 실행 후 브러시는 라인의 끝으로 이동합니다. 이때 선은 화면에 표시되지 않으며 이를 표시하려면 스트로크를 호출해야 한다는 점에 유의해야 합니다. 콘텐츠를 화면에 출력하려면 많은 리소스가 필요하기 때문에 먼저 lineTo 웨이브를 저장하고 마지막으로 스트로크를 사용하여 큰 웨이브를 넣을 수 있기 때문에 이 디자인은 의미가 있습니다.

경로

绘制路径非常简单，只需要先告诉 ctx 一声“我要开始画路径了”，然后通过各种方法（例如 lineTo）绘制路径。如果需要画一个封闭路径，那就最后告诉 ctx一声：“我画完了，你把它封闭起来吧。”当然，不要忘记利用 stroke 输出到屏幕上。

一个简单的例子：

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(150, 50);
ctx.lineTo(10, 50);
ctx.closePath();
ctx.stroke();

如果我不想只描绘路径线条，而是想填充整个路径呢？可以将最后一行的 stroke 改成 fill，这样就跟使用了画图中的油漆桶一样，封闭路径里面的内容就都被填充上颜色了：

ctx.fill();

弧 / 圆形

绘制弧的函数参数比较多：

ctx.arc(圆心 x 坐标, 圆心 y 坐标, 半径, 起始角度, 终止角度, 是否为逆时针);

注意，在 Canvas 的坐标系中，角的一边是以圆心为中心的水平向右的直线。角度单位均为弧度。例如下图，确定了圆心、起始角度（图中标明的锐角）和终止角度（图中标明的钝角），方向为逆时针，于是就有了这么一个弧。如果方向为顺时针，那么就会是一个跟它互补的、非常非常大的弧……

所以如果转了 2π 圈之后，弧就成了圆形，因此也可以使用绘制弧的方式来绘制圆形：

ctx.beginPath();
ctx.arc(圆心 x 坐标, 圆心 y 坐标, 半径, 0, Math.PI * 2, true);
ctx.closePath();

最后一个参数随便填（当然也可以不填），因为不管是顺时针还是逆时针，转了 2π 圈之后都是一个圆。