<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 선 그리기 </title>
<script type="text/javascript">
function line()
{
var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
context.moveTo(10,10);
//moveTo(x,y); 시작점 지정
context.lineTo(200,300);
//lineTo(x,y); 시작위치(바로 앞 moveTo)에서 지정한 위치까지 선을 그림
context.stroke();
// stroke(); 선 출력
context.moveTo(100,10);
context.lineTo(300,300);
context.lineTo(300,100);
context.stroke();
context.moveTo(300,10);
context.lineTo(500,300);
context.lineTo(500,100);
context.moveTo(550,10);
context.lineTo(550,300);
context.stroke();
}
</script>
</head>
<body onload="line();">
<canvas id="canvas" width="700" height="400"
style="border:solid 1px #000000">
</canvas>
</body>
</html>
'IT > 언어' 카테고리의 다른 글
| HTML 5 신규 element 정리 (0) | 2013.11.26 |
|---|---|
| canvas 원호 그리기 (0) | 2013.11.26 |
| canvas 다각형 그리기 (0) | 2013.11.26 |
| canvas 사용하기 (0) | 2013.11.26 |
| Jquery 유용한 사이트 모음 (0) | 2013.11.26 |