반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 다각형 그리기 </title>
<script type="text/javascript">
function polygon()
{
var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
context.beginPath();
context.moveTo(150,10);
context.lineTo(80,350);
context.lineTo(350,350);
context.lineTo(280,10);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(500,10);
context.lineTo(350,150);
context.lineTo(430,350);
context.lineTo(570,350);
context.lineTo(650,150);
context.closePath();
context.fill();
}
</script>
</head>
<body onload="polygon();">
<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 |