Mobile
The Context object can call the translate () method to move the coordinates of the origin in the Canvas. The prototype of the translate () method is as follows:
Void translate (x, y );
Moves the (0, 0) vertex of the Canvas corresponding to the Context object to the (x, y) vertex and uses it as the new (0, 0) vertex. Experiments show that the translate () method achieves this movement by setting the current (0, 0) point to (-x,-y) Point, after the coordinates are changed, other Context objects generated by the Canvas object are affected. However, like other image manipulation methods in Canvas, translate () only affects the image drawn after moving and does not work for the image already drawn into the Canvas.
The following example shows the moving effect:
<! 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. translate (600/2 * Math. random (), 400/2 * Math. random (); // start to move the paint brush
Context2D. drawImage (pic, 0, 0 );
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. translate (600/2 * Math. random (), 400/2 * Math. random (); // start to move the paint brush
Context2D. drawImage (pic, 0, 0 );
Context2D. restore (); // restores the paint brush state after the painting is finished.
}
SetInterval (draw, 1000 );
</Script>
</Body>
</Html>
:
I am sorry because it is dynamic and cannot see the effect.
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
