JavaScriptサンプル(五角形と星形)HTML5

onload = function() { draw();};
function draw() {
  var canvas = document.getElementById('fld');
  if ( ! canvas || ! canvas.getContext ) {return false;}
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.strokeStyle = 'rgb(255, 0, 0)';
  var Base = {x:100, y:10};
  ctx.moveTo(Base.x, Base.y);
  var radius = 90;
  for(var i=1;i<=5; ++i){
    var th = i * 2 * Math.PI/5;
    var x = Base.x + radius * Math.sin(th);
    var y = Base.y + radius - radius * Math.cos(th);
    ctx.lineTo(x,y);
  }
  ctx.stroke();
  ctx.beginPath();
  ctx.strokeStyle = 'rgb(0, 0, 255)';
  Base.x += 200;
  ctx.moveTo(Base.x, Base.y);
  for(var i=1;i<=5; ++i){
    var th = i * 4 * Math.PI/5;
    var x = Base.x + radius * Math.sin(th);
    var y = Base.y + radius - radius * Math.cos(th);
    ctx.lineTo(x,y);
  }
  ctx.stroke();
}