1. Panning
Canvas is really just a wrapper, the part that really plays an important role is the 2D rendering context, which is where we really draw the graphics.
However, the 2D rendering context is a standard, screen-based rendering platform. It uses the Cartesian coordinate system of the screen, with the upper left corner (0,0) coordinates as the Origin point.
When you move to the right, the coordinate value of x increases, and y's coordinate value increases when you move down.
Well, once we get to the coordinate system, we can move on to the location of the graphics!
Panning, which is the process of moving a graphic from one coordinate point to another, referring to the origin of the 2D rendering context (0,0)!
How to use: Translate (x, y) two parameters increase the X unit value to the left with the origin as the coordinate, and the Y unit value downward.
<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title>Deformation</title> <Scripttype= "Text/javascript">window.onload= function () { varCanvas=document.getElementById ("MyCanvas"); varContext=Canvas.getcontext ("2d"); Context.fillrect ( Max, Max, -, -); Context.translate ( Max, Max); //Set PanningContext.fillstyle= "RGB (255,0,0)"; Context.fillrect ( Max, Max, -, -); //after the displacement is performed, the origin coordinates (150,150) are added with 150, i.e. a rectangle with a width height of 100 units is plotted with coordinates (300,300) as the origin coordinates. Context.fillstyle= "RGB (0,255,255)"; Context.translate ( Max, Max); //Two displacement is equivalent to displacement of 300 or (300,300) for coordinates to drawContext.fillrect (0, 0, -, -); } </Script></Head><Body> <CanvasID= "MyCanvas"width= "+"Height= "+">your browser does not support the canvas at this stage! </Canvas></Body></HTML>
It is not difficult to see that once the canvas's drawing state is set, it will affect the drawing properties of all the elements after that!
This is because they are all manipulated in the context of the 2D rendering, not just the drawing.
2. Zooming
Method of Use: Scale (x, y);
The size of the adjustment element in the 2D context differs from the translation in that the (x, y) parameter is a zoom multiplier, not a pixel value.
Using this method alone will allow all elements to be magnified accordingly, which is definitely not what you want!
So we can call the Save () method before zooming, save the drawing state, and wait until the current element has been scaled.
Let's call the Restore () method again so that we can revert to the previous drawing state, allowing you to scale only the current element!
<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title>Deformation</title> <Scripttype= "Text/javascript">window.onload= function () { varCanvas=document.getElementById ("MyCanvas"); varContext=Canvas.getcontext ("2d");Context.save (); //Save the drawing state firstContext.translate ( Max, Max); //to perform a displacement operationContext.scale (2, 2); //enlarges the drawing element by twice timesContext.fillrect (0, 0, -, -); Context.restore (); //Restore Drawing StatusContext.fillrect (0, 0, -, -); //at this point, the drawn rectangle has no displacement and no magnification! } </Script></Head><Body> <CanvasID= "MyCanvas"width= "+"Height= "+">your browser does not support the canvas at this stage! </Canvas></Body></HTML>
AC Group: 225443677
Canvas Pan & Zoom
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
