HTML 캔버스 beginPath(), closePath()

1 예시 1

<canvas id='myCanvas' width='250', height='150'></canvas>
<script>
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.beginPath();
ctx.lineWidth='3';
ctx.strokeStyle='red';
ctx.moveTo(10,10);
ctx.lineTo(200,100);
ctx.stroke();
</script>

2 예시 2

<canvas id='myCanvas' width='250', height='250'></canvas>
<script>
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(10,100);
ctx.lineTo(200,100);
ctx.closePath();
ctx.stroke();
</script>

3 예시 3

<canvas id='myCanvas' width='250', height='150'></canvas>
<script>
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(10,100);
ctx.lineTo(200,100);
ctx.closePath();
ctx.fillStyle="rgb(0,0,255)";
ctx.fill();
</script>

4 같이 보기

• 캔버스 Path 관련 메소드

5 참고

• http://www.w3schools.com/tags/canvas_beginpath.asp
• http://www.w3schools.com/tags/canvas_closepath.asp