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