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

Source: Internet
Author: User
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

  1. Crop area
  2. Does your browser support Canvas ?! Just change one !!
  3. Script
  4. Window. onload = function (){
  5. Var canvas = document. getElementById ("canvas ");
  6. Canvas. width = 800;
  7. Canvas. height = 600;
  8. Var context = canvas. getContext ("2d ");
  9. Context. fillStyle = "# FFF ";
  10. Context. fillRect (0, 0, 800,600 );
  11. // Draw a large square on the screen
  12. Context. fillStyle = "black ";
  13. Context. fillRect (10, 10, 200,200 );
  14. Context. save ();
  15. Context. beginPath ();
  16. // Crop the square of the canvas from (0, 0) to (50, 50)
  17. Context. rect (0, 0, 50, 50 );
  18. Context. clip ();
  19. // Red circle
  20. Context. beginPath ();
  21. Context. strokeStyle = "red ";
  22. Context. lineWidth = 5;
  23. Context. arc (100,100,100, 0, Math. PI * 2, false );
  24. // Round
  25. Context. stroke ();
  26. Context. closePath ();
  27. Context. restore ();
  28. // Crop the entire canvas again
  29. Context. beginPath ();
  30. Context. rect (0, 0, 500,500 );
  31. Context. clip ();
  32. // Draw a blue line without cropping
  33. Context. beginPath ();
  34. Context. strokeStyle = "blue ";
  35. Context. lineWidth = 5;
  36. Context. arc (100,100, 50, 0, Math. PI * 2, false );
  37. // Round
  38. Context. stroke ();
  39. Context. closePath ();
  40. };
  41. 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;
  6. // The cropped area is (x, y) a circle with a center radius of 75.
  7. Context. save ();
  8. Context. beginPath ();
  9. Context. arc (x, y, radius, 0, 2 * Math. PI, false );
  10. Context. clip ();
  11. // Draw a blue arc first. The cropped part is not displayed.
  12. Context. beginPath ();
  13. Context. arc (x-offset, y-offset, radius, 0, 2 * Math. PI, false );
  14. Context. fillStyle = 'blue ';
  15. Context. fill ();
  16. // Draw a yellow arc. The cropped part is not displayed.
  17. Context. beginPath ();
  18. Context. arc (x + offset, y, radius, 0, 2 * Math. PI, false );
  19. Context. fillStyle = 'yellow ';
  20. Context. fill ();
  21. // Draw a red arc. The cropped part is not displayed.
  22. Context. beginPath ();
  23. Context. arc (x, y + offset, radius, 0, 2 * Math. PI, false );
  24. Context. fillStyle = 'red ';
  25. Context. fill ();
  26. /*
  27. * The restore () method returns the original state of context, which is prior to clip.
  28. * You can remove the context. beginPath () method and try to see what will happen.
  29. */
  30. Context. restore ();
  31. Context. beginPath ();
  32. Context. arc (x, y, radius, 0, 2 * Math. PI, false );
  33. Context. lineWidth = 10;
  34. Context. strokeStyle = 'blue ';
  35. Context. stroke ();
  36. }


Again, the call form of the cropping function is generally

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.