Cropping area images using clip() method in HTML5 Canvas API_html5 tutorial tips

When using Canvas to draw an image, we often want to keep only a part of the image. We can use the image cropping function of the canvas API to achieve this idea.
The image cropping function of Canvas API means that using a path within the canvas, only the image of the area contained in the path will be drawn, and the image outside the path will not be drawn. This is a bit like layer masks in Flash.

Use the clip() method without parameters of the graphics context to implement the image cropping function of Canvas. This method uses a path to set a clipping area for the Canvas. Therefore, the path must be created first. After creation is complete, call the clip() method to set the cropping area.
It should be noted that cropping is performed on the canvas. The cropped canvas cannot be restored to its original size, which means that the canvas becomes smaller as it is cut. To ensure that it can still be at the size originally defined by the canvas in the end Drawing needs to pay attention to save() and restore(). The canvas is cut first before drawing. It doesn’t have to be a picture, the path can also be put in~

Let’s take a look at a simple Demo first.

JavaScript CodeCopy content to clipboard

1. nbsp;html>   
2. "zh">   
3.   
4.      "UTF-8">   
5.        
6.     
7.         body { background: url("./images/bg3.jpg") repeat; }  
8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
9.        
10.   
11.   
12. "canvas-warp">   
13.     "canvas">   
14.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
15.        

<script> </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();

//Cut the canvas from the (0, 0) point to the square of (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);

//Full circle

context.stroke();

context.closePath();

context.restore();

//Cut the entire canvas again

context.beginPath();

context.rect(0,0,500,500);

context.clip();

//Draw an uncut blue line

context.beginPath();

context.strokeStyle = "blue";

context.lineWidth = 5;

context.arc(100,100,50,0,Math.PI * 2,false);

//Full circle

context.stroke();

context.closePath();

};