<!DOCTYPE html>
<html>
<head>
<title>폼으로 도형 그리기</title>
<style>
td {
text-align : right;
padding-left : 5px;
padding-right : 5px;
}
</style>
<script>
function draw() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;
var radius = document.getElementById("radius").value;
var anticlockwise = document.getElementById("anticlockwise").value;
var startangle = document.getElementById("startangle").value;
var endangle = document.getElementById("endangle").value * (Math.PI/2);
var lineWidth = document.getElementById("lineWidth").value;
var strokeStyle = document.getElementById("strokeStyle").value;
context.beginPath(); //도형그리기 시작
context.arc(x, y, radius, false, startangle, endangle);
context.lineWidth = lineWidth;
context.strokeStyle = strokeStyle;
context.stroke();
}
function erase() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(0, 0, canvas.radius, canvas.anticlockwise, canvas.startangle, canvas.endangle);
}
</script>
</head>
<body>
</body>
<h3>폼으로 원호 그리기</h3>
<hr>
<form>
<table>
<tr><td><label>x <input id="x" type="number" value="10"></label></td>
<td><label>y <input id="y" type="number" value="10"></label></td></tr>
<tr><td><label>반지름 <input id="radius" type="number" value="100"></label></td>
<td><label>방향 <input id="anticlockwise" type="text" value="시계방향"></label></td></tr>
<tr><td><label>시작각도 <input id="startangle" type="number" value="0"></label></td>
<td><label>끝각도 <input id="endangle" type="number" value="180"></label></td></tr>
<tr><td><label>선굵기 <input id="lineWidth" type="number" value="1"></label></td>
<td><label>선색 <input id="strokeStyle" type="color" value="#000000"></label></td></tr>
<tr><td><label><button type="button" onclick="draw()">그리기</button></label></td>
<td><button type="button" onclick="erase()">지우기</button></td></tr>
</table>
</form>
<canvas id="myCanvas" width="500" height="200"
style="background-color:aliceblue"></canvas>
</html>
도대체 어디가 틀리지 모르겠지만 아예 그리기가 안됩니다 여기서부터 어떻게 해야할지 모르겠습니다..
<body>에서 방향을 selcet로 해야하는 건가요? <script>에서 시작 각도랑 끝 각도는 어떻게 해야하나요 ㅠㅠ 멘붕입니다 ㅠㅠㅠㅠ
