Using canvas and animation

Objectives

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>