HTML5 canvas basic drawing graphics transformation

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b is a new tag in HTML5, used to draw graphics. In fact, this tag is the same as other tags. The special thing is that this tag can Get a CanvasRenderingContext2D object, we can control the object for drawing through JavaScript script.

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b is just a container for drawing graphics. In addition to attributes such as id, class, and style, it also has height and width attributes. There are three main steps for drawing on the 5ba626b379994d53f7acf72a64f9b697> element:

1. Get the DOM object corresponding to the 5ba626b379994d53f7acf72a64f9b697 element, which is a Canvas object;
2. Call the getContext( of the Canvas object ) method to get a CanvasRenderingContext2D object;
3. Call the CanvasRenderingContext2D object for drawing.

Graphic Transformation

Translation: context.translate(x,y), the received parameters are the translation x of the origin in the x-axis direction, and Translate y in the y-axis direction.

Scale: context.scale(x,y), the received parameters are the x coordinate axis to be scaled according to the x proportion, and the y coordinate axis to be scaled according to the y proportion.

Rotation: context.rotate(angle), the received parameter is the angle of rotation of the coordinate axis.

It should be noted that after changing the graphics, the next drawing will follow the previous state, so if you need to return to the initial state, you must use context.save(); and context .restore(); to save and restore the current state:

var canvas = document.getElementById("canvas");   

    var context = canvas.getContext("2d");   

      

    //translate()   

    context.save();   

    context.fillStyle = "#1424DE";   

    context.translate(10,10);   

    context.fillRect(0,0,200,200);   

    context.restore();   

      

    //scale()   

    context.save();   

    context.fillStyle = "#F5270B";   

    context.scale(0.5,0.5);   

    context.fillRect(500,50,200,200);   

    context.restore();   

    //rotate()   

      

    context.save();   

    context.fillStyle = "#18EB0F";   

    context.rotate(Math.PI / 4);   

    context.fillRect(300,10,200,200);   

    context.restore();

The effect is as follows:



In addition One related to graphics transformation is: matrix transformation: context.transform(a, b, c, d, e, f, g). The meaning of the parameters is as follows:

a Horizontal scaling (default is 1)
b Horizontal tilt (default is 0)
c Vertical tilt (default is 0)
d Vertical scaling (default is 0) 1)
e Horizontal displacement (default is 0)
f Vertical displacement (default is 0)

Readers can verify the effects of each parameter by themselves, and I will not introduce them one by one here.

The above is the content of graphic transformation of basic drawing of HTML5 canvas. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!