jQuery 1.4 Animation Techniques - Index of

Canvas Animations
},
context.lineTo(pos.up.x, pos.up.y - 2);
context.moveTo(pos.down.x, pos.down.y);
context.lineTo(pos.down.x, pos.down.y + 2);
context.stroke();
context.closePath();
height = height + 2;
pos.up.y = pos.up.y - 2;
pos.down.y = pos.down.y + 2;
}
if (width < 200) {
context.beginPath();
context.moveTo(pos.left.x, pos.left.y);
context.lineTo(pos.left.x - 2, pos.left.y);
context.moveTo(pos.right.x, pos.right.y);
context.lineTo(pos.right.x + 2, pos.right.y);
context.stroke();
context.closePath();
width = width + 2
pos.left.x = pos.left.x - 2;
pos.right.x = pos.right.x + 2;
}
} else {
clearInterval(crossInt);
addStripes();
}
},
crossInt = setInterval( function() { growVertical() }, 1);
What just happened?
Again, we have an outer inline function (called redCross()) containing some properties
that set the color and line styles, and some nested functions that will be used to draw the
red cross and the four custom shapes. As with the previous function, we declare width and
height control variables, and an object called pos containing the starting positions for the
lines that make up the cross. The cross is drawn first with the growVertical() function.
This function is very similar to the function in the last section of code. We draw four lines
starting in the middle of the rectangle which radiate to the top and bottom center, and the
right and left center.
[ 288 ]