HTML 참조 매뉴얼

HTML 표签 전체 목록

HTML: <template> 태그

HTML canvas stroke() 메서드

HTML canvas의 stroke() 메서드는 경로를 그리기 위해 사용됩니다. moveTo()와 lineTo() 메서드를 사용하여 이 경로를 그립니다.

HTML canvas 참조 설명서

온라인 예제

데이터를 그리기 위해 경로를 그리십시오. 글자 L을 파란색으로 그리고 한 줄을 그립니다：

JavaScript：

예제

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　canvas　stroke() 메서드 사용-기본 튜토리얼(oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="300"　height="150"　style="border:1px　solid　#d3d3d3>
귀하의 브라우저는　HTML5　canvas　표签。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.strokeStyle="blue";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,　200);
ctx.lineTo(100,　100);
ctx.strokeStyle = "blue";
ctx.stroke();
</script>　
</body>
</html>

시험해보기 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome 및 Safari가 stroke()를 지원합니다 메서드.

주의:Internet Explorer 8 이전 버전에서는 <canvas> 요소를 지원하지 않습니다.

정의와 사용법

stroke() 메서드는 moveTo()와 lineTo() 메서드로 정의된 경로를 실제로 그립니다. 기본 색상은 검정입니다.

추가적인 정보:사용하십시오 strokeStyle 속성을 사용하여 다른 색상을 그립니다/분극.

JavaScript 문법:	context.stroke();

HTML canvas 참조 설명서

HTML: <template> 태그