時間切れで回転を実装できなかったヘタレです。コードは以下。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style type="text/css">
canvas {border: 1px solid #999; }
</style>
</head><style type="text/css">
canvas {border: 1px solid #999; }
</style>
</head>
<body>
<th>rotate 関数</th><br>
<canvas id="graph" width="400" height="400"> </canvas><br>
<form>回転角度： <input type="text" id='degree'> <button type='button' onclick="draw();">回転</button></form>
<script type="text/javascript">
function rads(x) {
return Math.PI*x/180;
}
function draw(){
var e = document.getElementById('degree');
var c=document.getElementById("graph");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(200,200);
ctx.lineTo(200 + 150*Math.cos(rads(e.value)), 200 - 150*Math.sin(rads(e.value)));
ctx.closePath();
ctx.stroke();
}
var c=document.getElementById("graph");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,200);
ctx.lineTo(400,200);
ctx.moveTo(200,0);
ctx.lineTo(200,400);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(200,200,150,0,rads(360),false);
ctx.stroke();
</script>
</body>
</html>
SCRIPTタグをBODYタグの中に入れるのがポイントです。