Home > Article > Web Front-end > Cropping area images using clip() method in HTML5 Canvas API_html5 tutorial tips

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

WBOYOriginal: 2016-05-16 15:52:011321browse

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

"zh">
"UTF-8">
裁剪区域
"canvas-warp">
你的浏览器居然不支持Canvas？！赶快换一个吧！！

Run result:
2016325102516578.jpg (850×500)

Using a mixture of save() and restore() methods, we can limit the drawing area. First, we can use the rect() method to surround an area we want to draw, and then use the clip() method to crop the area.

In this way, no matter what operations we do in the context, only the limited part will be displayed. In other words, the function of clip() is to limit the area to be displayed. When we no longer want to limit the area, we can use the restore() method to jump out and continue operating the original context.
Look at this cropping again:
2016325102545351.png (275×198)

JavaScript CodeCopy content to clipboard

function drawScreen() {
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var offset = 50;
//The cropped area is (x, y), which is a circle with a center radius of 75
context.save();
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.clip();
// First draw a blue arc, the part that exceeds the crop will not be displayed
context.beginPath();
context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
//Draw a yellow arc, and the part that exceeds the crop will not be displayed
context.beginPath();
context.arc(x offset, y, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'yellow';
context.fill();
// Draw a red arc, and the part that exceeds the crop will not be displayed
context.beginPath();
context.arc(x, y offset, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'red';
context.fill();
/*
* The restore() method will return to the original state of the context, in this case the state before clip().
* You can remove the context.beginPath() method and try what happens.
*/
context.restore();
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = 'blue';
context.stroke();
}

I emphasize again that the general calling form of cropping function is

save();
clip();
restore();
are called in this order.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary of methods to achieve text alignment in HTML5 Canvas_html5 tutorial skillsNext article：Summary of methods to achieve text alignment in HTML5 Canvas_html5 tutorial skills

See more

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

Related articles