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？！赶快换一个吧！！
-
-
-
-
<script> </span> </li>
<li class="alt">
<span> window.onload = </span><span class="keyword">function</span><span>(){ </span> </li>
<li>
<span> </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>); </span> </li>
<li class="alt">
<span> canvas.width = 800; </span> </li>
<li>
<span> canvas.height = 600; </span> </li>
<li class="alt">
<span> </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>); </span> </li>
<li>
<span> context.fillStyle = </span><span class="string">"#FFF"</span><span>; </span> </li>
<li class="alt">
<span> context.fillRect(0,0,800,600); </span> </li>
<li>
<span> </span> </li>
<li class="alt">
<span> </span><span class="comment">//Draw a large square on the screen </span><span> </span> </li>
<li>
<span> context.fillStyle = </span><span class="string">"black"</span><span>; </span> </li>
<li class="alt">
<span> context.fillRect(10,10,200,200); </span> </li>
<li>
<span> context.save(); </span> </li>
<li class="alt">
<span> context.beginPath(); </span> </li>
<li>
<span> </span> </li>
<li class="alt">
<span> </span><span class="comment">//Cut the canvas from the (0, 0) point to the square of (50, 50) </span><span> </span> </li>
<li>
<span> context.rect(0,0,50,50); </span> </li>
<li class="alt">
<span> context.clip(); </span> </li>
<li>
<span> </span> </li>
<li class="alt">
<span> </span><span class="comment">//Red circle </span><span> </span> </li>
<li>
<span> context.beginPath(); </span> </li>
<li class="alt">
<span> context.strokeStyle = </span><span class="string">"red"</span><span>; </span> </li>
<li>
<span> context.lineWidth = 5; </span> </li>
<li class="alt">
<span> context.arc(100,100,100,0,Math.PI * 2,</span><span class="keyword">false</span><span>); </span> </li>
<li>
<span> </span><span class="comment">//Full circle </span><span> </span> </li>
<li class="alt">
<span> context.stroke(); </span> </li>
<li>
<span> context.closePath(); </span> </li>
<li class="alt">
<span> </span> </li>
<li>
<span> context.restore(); </span> </li>
<li class="alt">
<span> </span> </li>
<li>
<span> </span><span class="comment">//Cut the entire canvas again </span><span> </span> </li>
<li class="alt">
<span> context.beginPath(); </span> </li>
<li>
<span> context.rect(0,0,500,500); </span> </li>
<li class="alt">
<span> context.clip(); </span> </li>
<li>
<span> </span> </li>
<li class="alt">
<span> </span><span class="comment">//Draw an uncut blue line </span><span> </span> </li>
<li>
<span> context.beginPath(); </span> </li>
<li class="alt">
<span> context.strokeStyle = </span><span class="string">"blue"</span><span>; </span> </li>
<li>
<span> context.lineWidth = 5; </span> </li>
<li class="alt">
<span> context.arc(100,100,50,0,Math.PI * 2,</span><span class="keyword">false</span><span>); </span> </li>
<li>
<span> </span><span class="comment">//Full circle </span><span> </span> </li>
<li class="alt">
<span> context.stroke(); </span> </li>
<li>
<span> context.closePath(); </span> </li>
<li class="alt">
<span> }; </span> </li>
<li>
<span></script>
-
-
Run result:
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:
JavaScript CodeCopy content to clipboard
-
function drawScreen() {
-
var x = canvas.width / 2;
-
var y = canvas.height / 2;
-
var radius = 75;
-
var offset = 50;
-
-
-
context.save();
-
context.beginPath();
-
context.arc(x, y, radius, 0, 2 * Math.PI, false);
-
context.clip();
-
-
-
context.beginPath();
-
context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false);
-
context.fillStyle = 'blue';
-
context.fill();
-
-
-
context.beginPath();
-
context.arc(x offset, y, radius, 0, 2 * Math.PI, false);
-
context.fillStyle = 'yellow';
-
context.fill();
-
-
-
context.beginPath();
-
context.arc(x, y offset, radius, 0, 2 * Math.PI, false);
-
context.fillStyle = 'red';
-
context.fill();
-
-
-
-
-
-
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.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
