lissajous.html
<!doctype html>
<head>
  <title>lissajous</title>
  <script>
 
    var ctx;
    var t = 0;
    var sx, sy;
 
    onload = function () {
      ctx = canvas.getContext("2d");
      ctx.fillStyle = "rgba(0,0,0,.1)";
      ctx.strokeStyle = "#ffffff";
      setInterval(draw, 1000 / 30);
    };
 
    function draw() {
      var x = (1 + Math.cos(3 * t)) / 2 * canvas.width;
      var y = (1 - Math.sin(2 * t)) / 2 * canvas.height;
      if (0 < t) {
        ctx.fillRect(0, 0, canvas.width, canvas.height);
 
        ctx.beginPath();
        ctx.moveTo(sx, sy);
        ctx.lineTo(x, y);
        ctx.stroke();
      }
      sx = x;
      sy = y;
      t += 0.05;
    }
 
  </script>
</head>
<body>
  <canvas id="canvas" width="480" height="480"></canvas>
</body>
 
最終更新:2015年08月03日 21:13