HTML and CSS Reference
In-Depth Information
ball.draw(context);
}());
};
</script>
</body>
</html>
Waves with the drawing API
In the next example,
07-wave-2.html
, the ball has been removed and the canvas drawing API is used to draw
the sine wave. The call to
context.clearRect
in the
drawFrame
function has also been removed so that the
canvas element is not erased every frame, and the drawing remains. Here is the code for that file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Wave 2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
angle = 0,
range = 50,
centerY = canvas.height / 2,
xspeed = 1,
yspeed = 0.05,
xpos = 0,
ypos = centerY;
context.lineWidth = 2;
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.beginPath();
context.moveTo(xpos, ypos);
//Calculate the new position.
xpos += xspeed;
angle += yspeed;
ypos = centerY + Math.sin(angle) * range;
context.lineTo(xpos, ypos);
context.stroke();
}());
};
</script>
</body>
</html>
