HTML5 Canvas 裁剪区域

裁剪区域

Canvas中的剪辑区域，是由路径所定义的一块区域，浏览器会把所有的绘图操作都限制在该区域内执行。

Canvas中，使用clip()方法来设定剪辑区域，一旦设定好裁剪区域，则只有落在裁剪区域内的图形才能绘制出来，在裁剪区域以外进行绘制将没有任何效果。默认的剪辑区域是整个画布。

由于剪辑区域是由路径所定义的区域，所以，必须先调用beginPath()方法绘制一个路径，然后，才能通过clip()方法把该路径设置为裁剪区域。定义裁剪区域的步骤为：

调用beginPath()方法开始一个路径。
调用arc()、rect()等方法定义路径。
调用clip()方法，把该路径设置为裁剪区域。

下面以绘制两个圆形区域为例，来说明裁剪区域的使用方法。首先，不设置裁剪区域，绘制两个圆形区域：

context.lineWidth = 12;
context.strokeStyle = "#444";
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI*2);
context.closePath();
context.stroke();
context.beginPath();
context.arc(100, 100, 30, 0, Math.PI*2);
context.closePath();
context.stroke();

由于未设置裁剪区域，两个圆都被完整的绘制出来，运行结果如图 4‑25 所示：

图4-25 未设置裁剪区域

调用rect()方法，在画布的左上角定义一个100×100的矩形路径，再调用clip()方法把该路径设置为裁剪区域。

context.lineWidth = 12;
context.strokeStyle = "#444";
context.rect(0,0,100,100); // 定义裁剪区域
context.clip();
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI*2);
context.closePath();
context.stroke();
context.beginPath();
context.arc(100, 100, 30, 0, Math.PI*2);
context.closePath();
context.stroke();

上述代码设置了一个矩形的裁剪区域，所以，只有落在该裁剪区域内的部分被绘制出来。运行效果如图 4‑26 所示：

图4-26 设置一个裁剪区域

从上图可以看出，两个圆均只绘制出其左上角部分，其余部分没有被绘制。

当然，也可以设置多个裁剪区域。如果要定义多个裁剪区域，只需要在该路径中定义多条路径，再调用clip()方法把它们设置为裁剪区域即可。

context.lineWidth = 12;
context.strokeStyle = "#444";
context.rect(0,0,100,100); // 定义第一个裁剪区域
context.rect(100,100,100,100); // 定义第二个裁剪区域
context.clip();
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI*2);
context.closePath();
context.stroke();
context.beginPath();
context.arc(100, 100, 30, 0, Math.PI*2);
context.closePath();
context.stroke();

上述代码在原来的基础上，又增加了右下侧的裁剪区域。由于现在有两个矩形的裁剪区域，此时，左上角和右下角的圆弧都被绘制出来。运行结果如图 4‑27 所示：

图4-27 设置两个裁剪区域

当使用裁选区进行绘画后，有时需要取消该裁选区或重新定义裁选区。此时，可以在需要保存状态的地方调用save()方法，在需要恢复状态的地方调用restore()方法。

context.lineWidth = 12;
context.strokeStyle = "#444";
context.save(); // 保存状态
context.rect(0,0,100,100);
context.clip();
context.beginPath();
context.arc(100, 100, 60, 0, Math.PI*2);
context.closePath();
context.stroke();
context.restore(); // 恢复状态
context.beginPath();
context.arc(100, 100, 40, 0, Math.PI*2);
context.closePath();
context.stroke();

上述代码中，第一个圆被局限在裁选区域内。由于在绘制第二个圆之前，调用了restore()方法恢复状态，取消了裁选区域，因此第二个圆是完整的。运行结果如图 4‑28 所示：

图4-28 取消裁剪区域

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》，并全部在 GitHub 上开源。

HTML5 Canvas 裁剪区域相关推荐

html5 canvas裁剪图片,html5-canvas 使用画布裁剪图像
示例本示例显示了一个简单的图像裁剪功能,该功能获取图像和裁剪坐标并返回裁剪后的图像. function cropImage(image, croppingCoords) { var cc = cro ...
html5在线裁剪,HTML5 Canvas裁剪clip
裁剪(即clip())是渲染上下文中的绘制方法之一.很多人都以为这是一个清除概念,其实是错的.虽然从表现上看像清除,但是由于剪切区域由绘图路径设定,因此这是一个独立的显示区域. 在Canvas动画中, ...
html5在线裁剪,html5 Canvas裁剪图片
drawImage(图片,图片中裁减的起始x坐标,图片中裁减的起始y坐标,裁减区域宽度,裁减区域高度,所画位置x坐标,所画位置y坐标,所画图形宽度,所画图形高度) 首先来看如下效果: 代码如下: va ...
如何使用HTML5 Canvas元素来裁剪图像
本文介绍如何使用JavaScript和HTML5 Canvas元素来移动.调整大小和裁剪图像,这些技术适用于图片编辑器.照片分享等应用场景.借助HTML5 Canvas绘图功能,可以在浏览器端以比较简 ...
html5 canvas 自定义画图裁剪图片
html5 给我们带来了极大惊喜的canvas标签,有了它我们可以在浏览器客户端处理图片,不需要经过服务器周转.可以实现: 1.照片本地处理,ps有的一些基本功能都有 2.结合js可以实现一些很炫的动 ...
php画布怎么清除,JavaScript_JavaScript html5 canvas画布中删除一个块区域的方法，本文实例讲述了html5 canvas画布 - phpStudy...
JavaScript html5 canvas画布中删除一个块区域的方法本文实例讲述了html5 canvas画布中删除一个块区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 附:图 ...
HTML5 Canvas
HTML5 Canvas 转自:https://blog.csdn.net/u012468376/article/details/73350998 一.canvas简介 <canvas&g ...
使用 HTML5 canvas 进行 Web 绘图
新的 HTML5 规范旨在帮助开发人员更轻松的编写出各类 Web 应用,以顺应当前 SaaS,云计算以及 RIA 等技术的最新趋势.在 HTML5 得以广泛推广之前,开发人员通常使用 SVG,VML ...
html5canvas绘制图片源码,HTML5 CANVAS：绘制图片
HTML5 CANVAS:绘制图片通过前面的学习,我们现在已经可以在HTML5 canvas中绘制图形和文字,并给它们设置一些样式.我们还可以在中绘制图片.用于在作为绘制源的图片可以是下面的几种元素 ...

HTML5 Canvas 裁剪区域

裁剪区域

HTML5 Canvas 裁剪区域相关推荐

最新文章

热门文章