日: 2016年11月22日

canvas への描画

時間切れで回転を実装できなかったヘタレです。コードは以下。

<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>

rotate

SCRIPTタグをBODYタグの中に入れるのがポイントです。