Beispiel für den HTML5-Leinwandrotationseffekt_HTML5-Tutorial-Fähigkeiten

/*
* Funktion: Leinwandrotation
*/
(function(){
var canvas=null,
context=null,
angle =0;
function resetCanvas(){
canvas=document.getElementById("jb51");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
context=canvas.getContext(" 2d");
}
function animate(){
context.save();
try{
//Canvas löschen
context.clearRect (0, 0, Canvas. width, Canvas.height);
//Legen Sie den Ursprung fest
context.translate(canvas.width * 0.5, Canvas.height * 0.5);
//Drehwinkel
context.rotate(angle) ;
//Füllfarbe festlegen
context.fillStyle = "#FF0000";
//Rechteck zeichnen
context.fillRect(-30, -30, 60 , 60);
angle = 0.05 * Math.PI;
}
schließlich{
context.restore();
}
}
$(window).bind ("resize",resetCanvas). bind("reorient",resetCanvas);
$(document).ready(function(){
window.scrollTo(0,1);
resetCanvas();
setInterval(animate,40 );
});
})();