Crop a region image using the clip () method in HTML5CanvasAPI _ html5 tutorial tips-

This article describes how to crop a region image using the clip () method in HTML5CanvasAPI. Pay special attention to the use of the save () and restore () methods, for more information about how to use Canvas to draw images, we often want to retain only one part of the image. This is the idea that we can use the canvas API to crop images.
The image cropping function of the Canvas API refers to using a path in the Canvas to draw images of only the regions included in the path, rather than images outside the path. This is a bit like a layer mask in Flash.

Use the clip () method without parameters in the graphic context to crop the Canvas image. This method uses the path to set no cropping area for the Canvas. Therefore, you must first create a path. Call the clip () method to set the cropping area.
It should be noted that the cropping is performed on the canvas, and the cropped canvas cannot be restored to the original size, that is, the canvas is smaller and smaller, pay attention to save () and restore () for drawing with the size originally defined by the canvas (). The canvas is cropped before drawing. It is not necessarily an image, but the path can be included ~

Let's take a look at a simple Demo.

Copy the content to the clipboard using JavaScript Code

5. Crop area
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. // Draw a large square on the screen
25. Context. fillStyle = "black ";
26. Context. fillRect (10, 10, 200,200 );
27. Context. save ();
28. Context. beginPath ();
30. // Crop the square of the canvas from (0, 0) to (50, 50)
31. Context. rect (0, 0, 50, 50 );
32. Context. clip ();
34. // Red circle
35. Context. beginPath ();
36. Context. strokeStyle = "red ";
37. Context. lineWidth = 5;
38. Context. arc (100,100,100, 0, Math. PI * 2, false );
39. // Round
40. Context. stroke ();
41. Context. closePath ();
43. Context. restore ();
45. // Crop the entire canvas again
46. Context. beginPath ();
47. Context. rect (0, 0, 500,500 );
48. Context. clip ();
50. // Draw a blue line without cropping
51. Context. beginPath ();
52. Context. strokeStyle = "blue ";
53. Context. lineWidth = 5;
54. Context. arc (100,100, 50, 0, Math. PI * 2, false );
55. // Round
56. Context. stroke ();
57. Context. closePath ();
58. };
59. Script

Running result:

The save () and restore () methods are used in combination to limit the painting area. First, we can use the rect () method to enclose an area we want to draw, and then use the clip () method to crop the area.

In this way, no matter what operations are performed in the context, only the limited part is displayed. That is to say, clip () is used to limit the area to be displayed. When we do not want to continue to limit the region, we can use the restore () method to jump out and continue to operate the original context.
Let's take a look at this cropping:

Copy the content to the clipboard using JavaScript Code

1. Function drawScreen (){
2. Var x = canvas. width/2;
3. Var y = canvas. height/2;
4. Var radius = 75;
5. Var offset = 50;
7. // The cropped area is (x, y) a circle with a center radius of 75.
8. Context. save ();
9. Context. beginPath ();
10. Context. arc (x, y, radius, 0, 2 * Math. PI, false );
11. Context. clip ();
13. // Draw a blue arc first. The cropped part is not displayed.
14. Context. beginPath ();
15. Context. arc (x-offset, y-offset, radius, 0, 2 * Math. PI, false );
16. Context. fillStyle = 'blue ';
17. Context. fill ();
19. // Draw a yellow arc. The cropped part is not displayed.
20. Context. beginPath ();
21. Context. arc (x + offset, y, radius, 0, 2 * Math. PI, false );
22. Context. fillStyle = 'yellow ';
23. Context. fill ();
25. // Draw a red arc. The cropped part is not displayed.
26. Context. beginPath ();
27. Context. arc (x, y + offset, radius, 0, 2 * Math. PI, false );
28. Context. fillStyle = 'red ';
29. Context. fill ();
31. /*
32. * The restore () method returns the original state of context, which is prior to clip.
33. * You can remove the context. beginPath () method and try to see what will happen.
34. */
35. Context. restore ();
36. Context. beginPath ();
37. Context. arc (x, y, radius, 0, 2 * Math. PI, false );
38. Context. lineWidth = 10;
39. Context. strokeStyle = 'blue ';
40. Context. stroke ();
41. }

Again, the call form of the cropping function is generally

Save ();
Clip ();
Restore ();
In this order.