HTML5 Canvas_html5 튜토리얼 팁을 사용하여 삼각형, 직사각형 등의 다각형을 그리는 방법-H5 튜토리얼-php.cn

HTML5 Canvas_html5 튜토리얼 팁을 사용하여 삼각형, 직사각형 등의 다각형을 그리는 방법

WBOY

풀어 주다： 2016-05-16 15:51:50

원래의

1704명이 탐색했습니다.

HTML5 Canvas를 사용하여 다각형을 그리는 데 필요한 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)	定义一个新的绘制路径的起点坐标
lineTo(int x, int y)	定义一个绘制路径的中间点坐标
stroke(int x, int y)	沿着绘制路径的坐标点顺序绘制直线
closePath()	如果当前的绘制路径是打开的，则闭合该绘制路径。

삼각형 그리기

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"
//새 그리기 경로 시작
//선 색상을 파란색으로 설정
"파란색"
//경로의 시작점 좌표 설정
//좌표점(60, 50)에 직선을 그린다
//좌표점(60, 90)에 직선을 그린다
//먼저 그리기 경로를 닫습니다. 현재 끝점과 시작 끝점을 연결하는 데 직선이 사용됩니다.
//마지막으로 그리는 경로에 따라 직선을 그립니다.
}
해당 표시 효과는 다음과 같습니다.

직사각형 그리기
캔버스 그리기 사각형을 별도로 언급하는 이유는 캔버스 브러시 도구-CanvasRenderingContext2D 객체가 사각형 그리기 전용 메서드를 제공하기 때문입니다.
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. //선 색상을 파란색으로 설정
25. ctx.StrokeStyle = "파란색"
26. //캔버스의 좌표점(10,10)을 그리기 시작점으로 가로 80px, 세로 50px의 직사각형을 그립니다.
27. ctx.lect(10, 10, 80, 50)
28. //지정된 경로에 따라 직선을 그립니다.
29. ctx.Stroke()
30. //그리기 경로 닫기
31. ctx.closePath()
32. }
33. 스크립트>
34. 몸>
35. html>
해당 직사각형 효과는 다음과 같이 표시됩니다.