Graphics transformation of HTML5 canvas basic drawing

Time:2021-4-15

<canvas></canvas>It is a new tag added in HTML5 for drawing graphics. In fact, like other tags, this tag is special in that it can obtain a canvasrenderingcontext2d object, which can be controlled by JavaScript script for drawing.

<canvas></canvas>It’s just a container for drawing graphics. In addition to ID, class, style and other attributes, there are also height and width attributes. There are three main steps in drawing on < canvas > > elements

1. Get the DOM object corresponding to the < canvas > element, which is a canvas object;
2. Call getcontext () method of canvas object to get a canvasrenderingcontext2d object;
3. Call canvasrenderingcontext2d object to draw.

Graphic transformation

Translation:context.translate (x, y), the receiving parameters are that the origin moves X in the x-axis direction and Y in the y-axis direction.

Zoom:context.scale (x, y), the receiving parameters are X-axis scaled by x-scale and y-axis scaled by y-scale.

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

It should be noted that after the graphics are changed, the next drawing is followed by the last state, so if you need to return to the initial state, you need to use the context.save (); and context.restore (); to save and restore the current state:

JavaScript CodeCopy content to clipboard
  1. var canvas = document.getElementById(“canvas”);   
  2. var context = canvas.getContext(“2d”);   
  3.   
  4. //translate()   
  5. context.save();   
  6. context.fillStyle = “#1424DE”;   
  7. context.translate(10,10);   
  8. context.fillRect(0,0,200,200);   
  9. context.restore();   
  10.   
  11. //scale()   
  12. context.save();   
  13. context.fillStyle = “#F5270B”;   
  14. context.scale(0.5,0.5);   
  15. context.fillRect(500,50,200,200);   
  16. context.restore();   
  17. //rotate()   
  18.   
  19. context.save();   
  20. context.fillStyle = “#18EB0F”;   
  21. context.rotate(Math.PI / 4);   
  22. context.fillRect(300,10,200,200);   
  23. context.restore();   

The results are as follows

Another related to graph transformation is matrix transformation context.transform (a, b, c, d, e, f, g)。 The meaning of the parameter is as follows:

A horizontal zoom (default is 1)
B horizontal tilt (default is 0)
C vertical tilt (default is 0)
D vertical scaling (default is 1)
E horizontal displacement (default is 0)
F vertical displacement (default is 0)

Readers can verify the effect of each parameter by themselves, which will not be introduced here.

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.

Recommended Today

Common auxiliary classes

CountDownLatch Subtraction counter import java.util.concurrent.CountDownLatch; //Counter public class CountDownLatchDemo { public static void main(String[] args) throws InterruptedException { //The total number is 6. It can be used when the task must be performed CountDownLatch countDownLatch = new CountDownLatch(6); for (int i = 0; i < 6; i++) { new Thread(()->{ System.out.println(Thread.currentThread().getName()+” Go out”); countDownLatch.countDown(); },String.valueOf(i)).start(); […]