HTML5 Canvas를 사용하여 직선 등의 선을 그리는 방법 또는 polylines

HTML5 Canvas의 기본 개념 설명
html5, 개발자라면 누구나 익숙할 것이므로 소개가 필요하지 않습니다. HTML5는 "신흥" 웹 기술 표준입니다. 현재 IE8 이하를 제외하고 거의 모든 주요 브라우저(FireFox, Chrome, Opera, Safari, IE9)가 HTML5를 지원하기 시작했습니다. 또한, 모바일 브라우저 시장에서는 많은 모바일 브라우저가 'html5 지원 기능 및 성능'을 두고 군비 경쟁을 벌이기도 했습니다. 혁신적인 웹 기술 표준인 html은 많은 브라우저 제조업체나 조직의 강력한 지원과 결합되어 html5가 미래에 웹 기술의 리더가 될 것으로 예상됩니다.

'신흥'이라고 불리는 html5는 사실 전혀 새로운 것이 아닙니다. 결국 html5의 첫 번째 공식 초안은 2008년 초에 발표되었습니다. 2008년부터 계산하면 꽤 오랜 시간이 흘렀습니다. 그러나 지금까지 대부분의 개발자에게는 여전히 "천둥은 치고 비는 적습니다"라고 생각합니다. HTML5에 대해 듣는 사람은 많지만 실제로 HTML5를 사용하는 사람은 거의 없습니다.

우리 모두 알고 있듯이 html5에는 많은 새로운 기능이 추가되었습니다. html5의 많은 기능 중에서 Canvas는 가장 눈길을 끄는 새로운 기능 중 하나로 간주되어야 합니다. 우리는 html5의 Canvas 객체를 사용하여 브라우저 웹 페이지에 직접 그래픽을 그립니다. 이는 브라우저가 Flash와 같은 타사 플러그인 없이 웹 페이지에 직접 그래픽이나 애니메이션을 표시할 수 있음을 의미합니다.

이제 html5 초보자를 위해 html5 Canvas를 사용하여 기본적인 그래픽을 그리는 방법을 소개하겠습니다.

먼저 다음과 같은 기본 HTML 코드를 준비해야 합니다.

XML/HTML 코드클립보드에 콘텐츠 복사

>
<html>
<머리>
<메타 문자 집합="UTF- 8">
<제목>HTML5 Canvas 시작 예제목>
머리>
<몸>
몸>
html>

위 코드는 html5 페이지의 기본 코드 템플릿입니다. 그 중 코드의 첫 번째 줄은 문서 유형 태그 명령으로, 이는 html5 페이지의 표준 문서 유형 명령이기도 합니다. 이는 브라우저에 "이것은 html5 페이지입니다. 구문 분석하고 html5 웹페이지 표준에 따라 표시합니다." 이 페이지". 코드의 네 번째 줄은 브라우저에 "이 html5 페이지의 문자 인코딩은 UTF-8입니다"라고 알리는 데 사용됩니다. 이는 html5의 문자 인코딩을 작성하는 표준 방법이기도 합니다. 웹 페이지. 이는 이전 HTML 문자 인코딩 지침과 다릅니다.

XML/HTML 코드클립보드에 콘텐츠 복사

<메타 http-equiv=" 콘텐츠 유형" 콘텐츠="text/html;charset=UTF-8">

이제 위의 코드가 포함된 html 파일에 Canvas가 그래픽을 그리는 예를 설명하겠습니다. 먼저 위 HTML 코드의 본문 부분에 다음 캔버스 태그를 추가합니다.

XML/HTML 코드클립보드에 콘텐츠 복사

>
<html>
<머리>
<메타 문자 집합="UTF- 8">
<제목>HTML5 Canvas 시작 예제목>
머리>
<몸>
<캔버스 id="myCanvas" 너비="400px" 높이="300px" style="테두리: 1px 단색 빨간색;">
귀하의 브라우저가 캔버스 태그를 지원하지 않습니다.
캔버스>
몸>
html>

이때, HTML5를 지원하는 브라우저를 사용하여 페이지를 열면 다음과 같은 내용이 보입니다.
2016314110155998.png (455×321)

HTML5에서 캔버스 태그 자체에는 아무런 동작이 없으며 페이지에서 지정된 크기의 공백만 차지합니다. 캔버스 태그는 빈 캔버스와 동일하며 JavaScript에서 제공하는 캔버스 API를 사용하여 이 캔버스에 원하는 그래픽을 그리는 해당 코드를 작성해야 합니다.

참고: 캔버스 태그의 텍스트 콘텐츠는 HTML5를 지원하지 않는 브라우저에 표시됩니다. 위 HTML 코드에서 볼 수 있듯이, 귀하의 브라우저가 HTML5의 캔버스 태그를 지원하지 않는 경우, 캔버스 태그에 "귀하의 브라우저는 캔버스 태그를 지원하지 않습니다."라는 문구가 표시됩니다.
'화가'로서 우리는 먼저 JavaScript의 Canvas 객체인 손에 있는 브러시와 관련 내용을 숙지해야 합니다.

HTML5에서 캔버스 태그는 Canvas 개체에 해당합니다. JavaScript의 document.getElementById()와 같은 일반 함수를 사용하여 개체를 얻을 수 있습니다. JavaScript에서는 Canvas 객체를 직접 조작하지 않고 Canvas 객체를 통해 해당 그래픽 그리기 컨텍스트 객체 CanvasRenderingContext2D를 얻은 다음 CanvasRenderingContext2D 객체와 함께 제공되는 많은 그래픽 그리기 함수를 사용하여 그리는 점에 주목할 가치가 있습니다.

각 캔버스가 브러시에 해당하는 것과 같습니다. 캔버스에 그리려면 먼저 해당 브러시를 가져온 다음 이 브러시를 사용하여 캔버스에 그려야 합니다. CanvasRenderingContext2D 개체는 이 브러시와 동일합니다. 이제 JavaScript에서 이 브러시를 사용해 보겠습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

>
<html>
<머리>
<메타 문자 집합="UTF- 8">
<제목>HTML5 캔버스 선 그리기 시작 예< / 제목>
머리>
<몸>
<캔버스 id="myCanvas" 너비="400px" 높이="300px" style="테두리: 1px 단색 빨간색;">
귀하의 브라우저가 캔버스 태그를 지원하지 않습니다.
캔버스>
<스크립트 유형="text/ javascript">
//캔버스 객체 가져오기(캔버스)
var 캔버스 = 문서.getElementById("myCanvas")
//html5를 지원하지 않는 일부 브라우저에서 구문 오류 메시지가 표시되는 것을 방지하기 위해 현재 브라우저가 Canvas 개체를 지원하는지 간단히 감지합니다.
if(canvas.getContext){
//해당 CanvasRenderingContext2D 객체(브러시) 가져오기
var ctx = 캔버스.getContext("2d")
}
스크립트>
몸>
html>

위 코드에서 볼 수 있듯이 Canvas 개체의 getContext() 메서드를 사용하여 CanvasRenderingContext2D 개체를 얻을 수 있습니다. 좀 더 세심한 독자라면 알아차렸을 것입니다. getContext() 메소드는 문자열(2d)을 전달해야 하며, 얻은 CanvasRenderingContext2D 객체의 이름에도 2D가 포함되어 있다는 점을 알아차렸을 것입니다. 현재 html5는 2D 그리기만 지원하지만 향후 html5에서는 3D나 다른 형태의 그리기도 지원될 수 있기 때문입니다. 이때 CanvasRenderingContext3D 객체를 얻고 3D 그래픽을 그리기 위해 getContext("3d")를 사용해야 할 수도 있습니다.

html5 캔버스를 사용하여 선(직선, 다중선 등)을 그립니다.
html5 캔버스를 사용하여 직선을 그리는 데 필요한 CanvasRenderingContext2D 개체의 주요 속성 및 메서드("() " 방법)은 다음과 같습니다.

属性或方法	基本描述
strokeStyle	用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
globalAlpha	定义绘制内容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之间，默认值为1.0。
lineWidth	定义绘制线条的宽度。默认值是1.0，并且这个属性必须大于0.0。较宽的线条在路径上居中，每边各有线条宽的一半。
lineCap	指定线条两端的线帽如何绘制。合法的值是 "butt"、"round"和"square"。默认值是"butt"。
beginPath()	开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。它将重置内存中现有的路径。
moveTo(int x, int y)	移动画笔到指定的坐标点`(x,y)`，该点就是新的子路径的起始点
lineTo(int x, int y)	使用直线连接当前端点和指定的坐标点`(x,y)`
stroke(int x, int y)	沿着绘制路径的坐标点顺序绘制直线
closePath()	如果当前的绘制路径是打开的，则关闭掉该绘制路径。此外，调用该方法时，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭(比如先调用了stroke())或者只有一个点，它会什么都不做。

캔버스 그래픽을 그리는 과정에서 우리는 거의 항상 소위 그리기 경로라고 하는 특정 순서로 몇 개의 좌표점을 설정한 다음 필요에 따라 지정된 방식으로 이러한 좌표점을 연결합니다. 우리에게 필요한 모양. CanvasRenderingContext2D 객체의 위 API를 이해하고 나면 선 그리기가 매우 간단해집니다.

캔버스를 사용하여 기본 직선을 그립니다

이제 캔버스를 사용하여 가장 기본적인 직선을 그립니다.

JavaScript 코드클립보드에 콘텐츠 복사

"UTF-8">

HTML5 캔버스 그리기 선 시작하기 예

width="400px" height="300px" style="테두리: 1px 단색 빨간색;"> 귀하의 브라우저가 캔버스 태그를 지원하지 않습니다.
"텍스트/자바스크립트"
//캔버스 객체 가져오기(캔버스)
var canvas = document.getElementById(
); //html5를 지원하지 않는 일부 브라우저에서 구문 오류 메시지가 표시되는 것을 방지하기 위해 현재 브라우저가 Canvas 개체를 지원하는지 여부를 간단히 감지합니다.
if(canvas.getContext){
//해당 CanvasRenderingContext2D 객체(브러시) 가져오기
var ctx = canvas.getContext("2d"
//Canvas의 좌표계는 다음과 같습니다. Canvas 캔버스의 왼쪽 상단은 원점(0,0), 가로좌표는 오른쪽, 세로좌표는 아래로, 단위는 픽셀(px)입니다.
//새 그리기 경로 시작
//직선의 시작점 좌표를 (10,10)으로 정의
//직선의 끝점 좌표를 (50,10)으로 정의
//좌표점 순서의 경로를 따라 직선을 그립니다.
//현재 그리기 경로 닫기
}
표시 효과는 다음과 같습니다.

캔버스를 사용하여 색칠된 직선을 그립니다

우리 모두 알고 있듯이 현실 세계의 브러쉬도 종류가 다양하고 색상도 다양합니다. 마찬가지로, 캔버스 브러시 CanvasRenderingContext2D 개체에도 필요한 다양한 색상이 있을 수 있습니다. 위의 코드 예제에서 색상을 지정하지 않으면 캔버스 브러시는 기본적으로 가장 일반적인 검정색으로 설정됩니다.

이제 다시 캔버스 브러시를 사용하여 파란색 직선을 그립니다(페이지의 단순성을 기반으로 아래에는 주요 JavaScript 코드만 제공됩니다. 위의 전체 코드 예제도 참조하세요).
XML/HTML 코드클립보드에 콘텐츠 복사
1. >
2. <html>
3. <머리>
4. <메타 문자 집합="UTF- 8">
5. <제목>HTML5 캔버스 선 그리기 시작 예< / 제목>
6. 머리>
7. <몸>
10. <캔버스 id="myCanvas" 너비="400px" 높이="300px" style="테두리: 1px 단색 빨간색;">
11. 귀하의 브라우저가 캔버스 태그를 지원하지 않습니다.
12. 캔버스>
14. <스크립트 유형="text/ javascript">
15. //캔버스 객체 가져오기(캔버스)
16. var 캔버스 = 문서.getElementById("myCanvas")
17. //html5를 지원하지 않는 일부 브라우저에서 구문 오류 메시지가 표시되는 것을 방지하기 위해 현재 브라우저가 Canvas 개체를 지원하는지 간단히 감지합니다.
18. if(canvas.getContext){
19. //해당 CanvasRenderingContext2D 객체(브러시) 가져오기
20. var ctx = 캔버스.getContext("2d")
22. //새 그리기 경로 시작
23. ctx.beginPath()
24. //직선의 시작점 좌표를 (10,10)으로 정의
25. ctx.moveTo(10, 10)
26. //직선의 끝점 좌표를 (50,10)으로 정의
27. ctx.lineTo(50, 10)
28. //좌표점 순서의 경로를 따라 직선을 그립니다.
29. ctx.Stroke()
30. //현재 그리기 경로 닫기
31. ctx.closePath()
33. //색상으로 직선 그리기
34. ctx.moveTo(10, 30)
35. ctx.lineTo(50, 30)
36. //"blue", "#0000ff", "#00f", "rgb(0,0,255)", "rgba(0,0,255, 1)과 같은 CSS 색상 값의 다양한 표현을 지원합니다. )"
37. // 최종 그리기 함수를 호출하기 전에 색상 등 각종 설정을 호출해야 합니다.
38. ctx.StrokeStyle = "파란색";
39. ctx.Stroke()
40. //현재 그리기 경로 닫기
41. ctx.closePath()
42. }
43. 스크립트>
44. 몸>
45. html>
해당 표시 효과는 다음과 같습니다.

캔버스를 사용하여 기본 폴리라인 그리기

캔버스로 직선 그리기를 익히면 다중선 및 기타 형태의 선을 그리는 것이 훨씬 쉬워집니다. 경로 중간 지점을 몇 개 더 그려서 차례로 연결하면 됩니다.
JavaScript 코드클립보드에 콘텐츠 복사
1. <스크립트 유형="텍스트/자바스크립트">
2. //캔버스 객체 가져오기(캔버스)
3. var canvas = document.getElementById("myCanvas");
4. //html5를 지원하지 않는 일부 브라우저에서 구문 오류 메시지가 표시되는 것을 방지하기 위해 현재 브라우저가 Canvas 개체를 지원하는지 여부를 간단히 감지합니다.
5. if(canvas.getContext){
6. //해당 CanvasRenderingContext2D 객체(브러시) 가져오기
7. var ctx = canvas.getContext("2d");
9. //새 그리기 경로 시작
11. //선 색상을 파란색으로 설정
12. "파란색"
13. //경로의 시작점 좌표 설정
15. //중간점 좌표 1 정의
17. //중간점 좌표 2 정의
19. //중간점 좌표 3을 정의합니다(마지막 중간점, 끝점입니다)
21. //그려진 경로 순서대로 좌표점 연결
23. //그리기 경로 닫기
해당 표시 효과는 다음과 같습니다.

위 내용을 마스터하신 후에는 Canvas를 사용하여 선을 그리는 방법에 대한 기본적인 이해가 되셨다고 생각합니다. 선 너비, 투명도 등의 제어는 단일 속성만 설정하면 되므로 위의 관련 API를 참조하고 여기에서는 자세한 내용을 다루지 않습니다.

강점: 그래픽 경로를 그릴 때 반드시 BeginPath()를 먼저 호출하세요. BeginPath() 메서드는 메모리에서 이전 그리기 경로 정보를 지웁니다. 이렇게 하지 않으면 단일 도형을 그리는 데에는 아무런 영향이 없을 수 있지만, 여러 도형(예: 위의 예에서 두 개의 직선)을 그리는 경우 경로 그리기 등의 작업에서 예상치 못한 결과가 발생할 수 있습니다. 또는 색상 채우기.
또한, 초보자는 closePath() 메서드에 약간의 주의를 기울여야 합니다. 특히 위 API 표의 closePath() 메서드 설명에 빨간색 텍스트가 있습니다. 위의 폴리라인 그리기 코드 예제에서는 먼저 스트로크()를 호출한 다음 closePath()를 호출했습니다. 실제로 스트로크() 메서드를 호출하면 폴리라인이 이미 그려져 있고 현재 그리기 경로가 닫혀 있으므로 closePath() 메서드를 다시 호출하면 현재 폴리라인을 연결하기 위해 직선을 사용하지 않습니다. 끝점 및 시작 끝점(즉 여기서 closePath() 는 선택 사항이지만 좋은 습관을 유지하려면 여전히 작성하는 것이 좋습니다). stroke()와 closePath()를 호출하는 순서를 바꾸면 상황이 완전히 달라집니다. closePath()가 먼저 호출되고 이때 그리기 경로가 닫히지 않으므로 closePath()는 현재 끝점과 시작 끝점을 직선으로 연결합니다.

Stroke()와 closePath()의 호출 순서를 바꾼 후의 샘플 코드는 다음과 같습니다.

호출 순서를 교환한 후 해당 표시 효과는 다음과 같습니다.

HTML5 Canvas를 사용하여 직선 등의 선을 그리는 방법 또는 polylines_html5 튜토리얼 기술