Rotate
Like moving, the Context object can call the rotate () method to rotate the Canvas at a certain angle. The rotate () method is prototype as follows:
Void rotate (radian );
It is used to rotate the Canvas clockwise to a radian angle in the direction of the original X-axis (horizontal axis). radian is in radians. After rotation, the x-axis direction changes at the same time. Similarly, rotation will not affect the drawn image, but will affect other Context objects generated by the Canvas.
The following rotating example:
<! Doctype html>
<Html>
<Body>
<Canvas id = "canvas" width = "600" height = "400">
<P> Your browserdoes not support the canvas element! </P>
</Canvas>
<Script type = "text/javascript">
Var canvas = document. getElementById ("canvas ");
Var context2D = canvas. getContext ("2d ");
Var pic = new Image ();
Pic. src = "milaoshu.jpg"; // pay attention to the directory structure. Here we put the image and html in a directory.
// Pay attention to the protection of the paint brush State in the following method, which will be used in many cases
Function draw (){
Context2D. clearRect (0, 0, 600,400 );
Context2D. save (); // save the paint brush status
Context2D. rotate (Math. PI/10 * Math. random (); // start Rotation
Context2D. drawImage (pic, 100,100 );
Context2D. restore (); // restores the paint brush state after the painting is finished.
}
SetInterval (draw, 1000 );
</Script>
</Body>
</Html>
<! Doctype html>
<Html>
<Body>
<Canvas id = "canvas" width = "600" height = "400">
<P> Your browserdoes not support the canvas element! </P>
</Canvas>
<Script type = "text/javascript">
Var canvas = document. getElementById ("canvas ");
Var context2D = canvas. getContext ("2d ");
Var pic = new Image ();
Pic. src = "milaoshu.jpg"; // pay attention to the directory structure. Here we put the image and html in a directory.
// Pay attention to the protection of the paint brush State in the following method, which will be used in many cases
Function draw (){
Context2D. clearRect (0, 0, 600,400 );
Context2D. save (); // save the paint brush status
Context2D. rotate (Math. PI/10 * Math. random (); // start Rotation
Context2D. drawImage (pic, 100,100 );
Context2D. restore (); // restores the paint brush state after the painting is finished.
}
SetInterval (draw, 1000 );
</Script>
</Body>
</Html>
Effect
Supplement:
Zoom
The Context object can call the scale () method to control the zoom ratio of the Canvas on the X and Y axes. The scale () method is prototype as follows:
Void scale (x, y );
X and y represent the zooming ratio on the x and y axes respectively, and must be positive numbers. Like translate () and rotate (), scale also changes the entire Canvas object, but it does not affect the drawn image.
Because zooming is very simple, it is not a separate demo.
From Feng Xiaowei
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
