Using canvas and animation
Objectives
- use the canvas element
- create animation using canvas
In-class demonstration code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script>
var context;
var dx = 2, dy = 3, x = 50, y = 150;
function draw() {
context = c.getContext('2d');
context.clearRect(0,0,200,300);
context.beginPath();
context.fillStyle = "#0000ff";
context.arc(x, y, 20, 0, Math.PI*2, true);
context.closePath();
context.fill();
if (x < 20 || x > 180) dx = -dx;
if (y < 20 || y > 280) dy = -dy;
x += dx;
y += dy;
}
window.onload = function() {
setInterval(draw, 10);
}
</script>
<style>
h1 { text-align: center; }
#c { border: 1px solid #000000; background-color: #ff8080; }
#content { width: 202px; margin: 0 auto; }
</style>
</head>
<body>
<h1>Demo</h1>
<div id="content">
<canvas id="c" width="200" height="300"></canvas>
</div>
</body>
</html>