How to Use the drawImage () method in HTML5CanvasAPI _ html5 tutorial tips-

This article describes how to use the drawImage () method in HTML5CanvasAPI. The drawImage () method is mainly used to scale or crop images. The coordinates and related parameter usage are given in this article, if you need it, you can refer to drawImage () as a key method. It can introduce images, canvases, and videos and scale or crop them.

There are three forms:

Syntax 1

Copy the content to the clipboard using JavaScript Code

1. Context. drawImage (img, dx, dy );

Syntax 2

Copy the content to the clipboard using JavaScript Code

1. Context. drawImage (img, dx, dy, dw, dw );

Syntax 3

Copy the content to the clipboard using JavaScript Code

1. Context. drawImage (img, sx, sy, sw, sh, dx, dy, dw, dh );

Let's take a look at the coordinate sketch:

PS: do not define in style Otherwise, the image is automatically enlarged or reduced.
The three parameters are in the standard format and can be used to load images, canvases, or videos. In addition to the ability to load images, the five parameters can also be used to scale the images with a specified width or height. In addition to scaling, you can also Crop Data. The meanings of parameters are shown in the following table.

Parameters	Description
Img
Sx	Optional. The x coordinate position of the Start cut.
Sy	Optional. Y coordinate position of the Start cut.
Swidth	Optional. Width of the cut image.
Sheight	Optional. The height of the cut image.
X	Place the x coordinate position of the image on the canvas.
Y	Place the y coordinate position of the image on the canvas.
Width	Optional. The width of the image to be used. (Stretch or zoom out an image)
Height	The height of the image to be used. (Stretch or zoom out an image)

Next, we will try to load an image.

Copy the content to the clipboard using JavaScript Code

5. DrawImage ()
11. Does your browser support Canvas ?! Just change one !!
15. Script
16. Window. onload = function (){
17. Var canvas = document. getElementById ("canvas ");
18. Canvas. width = 800;
19. Canvas. height = 600;
20. Var context = canvas. getContext ("2d ");
21. Context. fillStyle = "# FFF ";
22. Context. fillRect (0, 0, 800,600 );
24. Var img = new Image ();
25. Img. src = "./images/20-1.jpg ";
26. Img. onload = function (){
27. Context. drawImage (img, 200,50 );
28. }
29. };
30. Script

Running result:

Create a photo frame:
Here, we use clip (), drawImage (), and the three-step bezierCurveTo curve () to add a heart-shaped photo frame to the above case ~

Copy the content to the clipboard using JavaScript Code

5. Draw a heart-shaped Photo Frame
11. Does your browser support Canvas ?! Just change one !!
15. Script
16. Window. onload = function (){
17. Var canvas = document. getElementById ("canvas ");
18. Canvas. width = 800;
19. Canvas. height = 600;
20. Var context = canvas. getContext ("2d ");
21. Context. fillStyle = "# FFF ";
22. Context. fillRect (0, 0, 800,600 );
24. Context. beginPath ();
25. Context. moveTo (400,260 );
26. Context. bezierCurveTo (450,220,450,300,400,315 );
27. Context. bezierCurveTo (350,300,350,220,400,260 );
28. Context. clip ();
29. Context. closePath ();
31. Var img = new Image ();
32. Img. src = "./images/20-1.jpg ";
33. Img. onload = function (){
34. Context. drawImage (img, 348,240,100,100 );
35. }
36. };
37. Script

Running result:

Is it beautiful? Well, now the most important thing is mask and image cropping. in java. awt, drawImage () is also a crucial method. Some people say that to create a Java game interface, you only need to use drawImage () to try it all over the world ~ The same is true in Canvas. The materials provided by the artist are basically images. In this case, drawImage () is very important for image processing. Even basic skills are the most important way to process images.