Use clip () in the HTML5 Canvas API to crop a region image.
When using Canvas to draw images, we often want to retain only some of the images. This is the idea that we can use the canvas API to reproduce the image cropping function.
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
- <! DOCTYPE html>
- <Html lang = "zh">
- <Head>
- <Meta charset = "UTF-8">
- <Title> crop a region </title>
- <Style>
- Body {background: url ("./images/bg3.jpg") repeat ;}
- # Canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto ;}
- </Style>
- </Head>
- <Body>
- <Div id = "canvas-warp">
- <Canvas id = "canvas">
- Does your browser support Canvas ?! Just change one !!
- </Canvas>
- </Div>
- <Script>
- Window. onload = function (){
- Var canvas = document. getElementById ("canvas ");
- Canvas. width = 800;
- Canvas. height = 600;
- Var context = canvas. getContext ("2d ");
- Context. fillStyle = "# FFF ";
- Context. fillRect (0, 0, 800,600 );
- // Draw a large square on the screen
- Context. fillStyle = "black ";
- Context. fillRect (10, 10, 200,200 );
- Context. save ();
- Context. beginPath ();
- // Crop the square of the canvas from (0, 0) to (50, 50)
- Context. rect (0, 0, 50, 50 );
- Context. clip ();
- // Red circle
- Context. beginPath ();
- Context. strokeStyle = "red ";
- Context. lineWidth = 5;
- Context. arc (100,100,100, 0, Math. PI * 2, false );
- // Round
- Context. stroke ();
- Context. closePath ();
- Context. restore ();
- // Crop the entire canvas again
- Context. beginPath ();
- Context. rect (0, 0, 500,500 );
- Context. clip ();
- // Draw a blue line without cropping
- Context. beginPath ();
- Context. strokeStyle = "blue ";
- Context. lineWidth = 5;
- Context. arc (100,100, 50, 0, Math. PI * 2, false );
- // Round
- Context. stroke ();
- Context. closePath ();
- };
- </Script>
- </Body>
- </Html>
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
- Function drawScreen (){
- Var x = canvas. width/2;
- Var y = canvas. height/2;
- Var radius = 75;
- Var offset = 50;
- // The cropped area is (x, y) a circle with a center radius of 75.
- Context. save ();
- Context. beginPath ();
- Context. arc (x, y, radius, 0, 2 * Math. PI, false );
- Context. clip ();
- // Draw a blue arc first. The cropped part is not displayed.
- Context. beginPath ();
- Context. arc (x-offset, y-offset, radius, 0, 2 * Math. PI, false );
- Context. fillStyle = 'blue ';
- Context. fill ();
- // Draw a yellow arc. The cropped part is not displayed.
- Context. beginPath ();
- Context. arc (x + offset, y, radius, 0, 2 * Math. PI, false );
- Context. fillStyle = 'yellow ';
- Context. fill ();
- // Draw a red arc. The cropped part is not displayed.
- Context. beginPath ();
- Context. arc (x, y + offset, radius, 0, 2 * Math. PI, false );
- Context. fillStyle = 'red ';
- Context. fill ();
- /*
- * The restore () method returns the original state of context, which is prior to clip.
- * You can remove the context. beginPath () method and try to see what will happen.
- */
- Context. restore ();
- Context. beginPath ();
- Context. arc (x, y, radius, 0, 2 * Math. PI, false );
- Context. lineWidth = 10;
- Context. strokeStyle = 'blue ';
- Context. stroke ();
- }
Again, the call form of the cropping function is generally
Save ();
Clip ();
Restore ();
In this order.
