Home > Web Front-end > H5 Tutorial > body text

HTML5 canvas basic drawing graphics transformation

黄舟
Release: 2017-02-23 14:02:09
Original
1864 people have browsed it

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.

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 > element:

1. Get the DOM object corresponding to the 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();
Copy after login



The effect is as follows:

HTML5 canvas basic drawing graphics transformation

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 (www.php.cn)!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!