HTML and CSS Reference
In-Depth Information
var cwidth;
var cheight;
var lastX = 0;
var lastY = 0;
// initialize animation
function init() {
// set variable values
canvas = document.getElementById( "canvas" );
context = canvas.getContext("2d");
cwidth = canvas.width;
cheight = canvas.height;
// start animation sequence by calling the up-
date function every 30 milliseconds
setInterval(update, 30);
}
// clear and redraw the canvas
function invalidate() {
clear();
draw();
}
// clear the canvas
function clear() {
context.clearRect( 0 , 0 , cwidth , cheight );
}
// draw the graphics on the canvas using the saved x, y
coordinate values
function draw() {
context.fillRect(0,lastY,cwidth,5);
context.fillRect(lastX,0,5,cheight);
}
// update the saved x, y coordinate values. Reset them to
zero if they reach the canvas edge
function update() {
lastY += 1;
Search WWH ::




Custom Search