HTML and CSS Reference
In-Depth Information
context.lineTo(-1,-1);
context.stroke();
context.closePath();
context.restore(); //pop old state on to screen
}
}
function renderRocks() {
var tempRock = {};
var rocksLength = rocks.length-1;
for (var rockCtr=rocksLength;rockCtr>=0;rockCtr--){
tempRock = rocks[rockCtr];
var angleInRadians = tempRock.rotation * Math.PI / 180;
//ConsoleLog.log("render rock rotation"+(tempRock.rotation));
context.save(); //save current state in stack
context.setTransform(1,0,0,1,0,0); // reset to identity
//translate the canvas origin to the center of the player
context.translate(tempRock.x+tempRock.halfWidth,
tempRock.y+tempRock.halfHeight);
//ConsoleLog.log("render rock x"+(tempRock.x+tempRock.halfWidth));
//ConsoleLog.log("render rock y"+(tempRock.y+tempRock.halfHeight));
context.rotate(angleInRadians);
context.strokeStyle = '#ffffff';
context.beginPath();
//draw everything offset by 1/2.
//Zero Relative 1/2 is if .5*width -1. Same for height
context.moveTo(-(tempRock.halfWidth-1),-(tempRock.halfHeight-1));
context.lineTo((tempRock.halfWidth-1),-(tempRock.halfHeight-1));
context.lineTo((tempRock.halfWidth-1),(tempRock.halfHeight-1));
context.lineTo(-(tempRock.halfWidth-1),(tempRock.halfHeight-1));
context.lineTo(-(tempRock.halfWidth-1),-(tempRock.halfHeight-1));
context.stroke();
context.closePath();
context.restore(); //pop old state on to screen
}
}
function renderSaucers() {
var tempSaucer = {};
var saucerLength = saucers.length-1;
for (var saucerCtr=saucerLength;saucerCtr>=0;saucerCtr--){
//ConsoleLog.log("saucer: " + saucerCtr);
tempSaucer = saucers[saucerCtr];
context.save(); //save current state in stack
context.setTransform(1,0,0,1,0,0); // reset to identity
