Comments: This article describes examples of canvas Rotation effects of JS and html5.
The keleyi.htm code is as follows:
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> html rotating canvas </title>
<Script type = "text/javascript" src = "/jquery-1.10.2.min.js"> </script>
<Script type = "text/javascript" src = "jb51.js"> </script>
</Head>
<Body>
<Canvas id = "jb51"> </canvas>
</Body>
</Html>
The jb51.js code is as follows:
The Code is as follows:
/*
* Function: rotate the canvas.
*/
(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 {
// Clear the canvas
Context. clearRect (0, 0, canvas. width, canvas. height );
// Set the origin
Context. translate (canvas. width * 0.5, canvas. height * 0.5 );
// Rotation Angle
Context. rotate (angle );
// Set the fill color
Context. fillStyle = "# FF0000 ";
// Draw a rectangle
Context. fillRect (-30,-30, 60, 60 );
Angle ++ = 0.05 * Math. PI;
}
Finally {
Context. restore ();
}
}
$ (Window). bind ("resize", resetCanvas). bind ("reorient", resetCanvas );
$ (Document). ready (function (){
Window. scrollTo (0, 1 );
ResetCanvas ();
SetInterval (animate, 40 );
});
})();
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
