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 i = 4;
  var n = 50;
  var Base = {x:100, y:100};
  ctx.moveTo(Base.x, Base.y);
  var radius = 70;
  for(j=0; j<=2*Math.PI; j+=Math.PI/n/i){
    var x = radius * Math.sin(i * j);
    var y = radius * Math.sin((i + 1) * j);
    ctx.lineTo(Base.x + x, Base.y - y);
  }
  ctx.stroke();