Canvas学习:裁切clip()

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

上一节中学习了Canvas的图像合成,通过图像合成的技术可以轻易的实现类似于刮刮卡的效果,其实除了实现刮刮卡的效果之外,还可以使用这种技术制作类似于探照灯的效果。

前面也说过了,Canvas中的图像合成非常类似于CSS中的混合模式,也类似于一些设计软件中的图层合层。但就上面的探照灯的效果,其又有点像是CSS的遮罩。其实在Canvas中,除了使用图像合成之外能实现上面的探照灯的效果之外,还可以使用Canvas的裁切clip()方法。那么这一节,我们就来简单的了解Canvas的clip()的相关知识点。

Canvas中的剪切

接下来我们要聊的不是图像的合成,而是Canvas中的另一个有用的功能:剪切区域。它是Canvas之中由路径所定义的一块区域,浏览器会将所有的绘图操作都限制在本区域内执行。在默认情况下,剪辑区域的大小与Canvas画布大小一致。除非你通过创建路径并调用Canvas绘图环境对象的clip()方法来显式的设定剪辑区域,否则默认的剪辑区域不会影响Canvas之中所绘制的内容。然而,一旦设置好剪辑区域,那么你在Canvas之中绘制的所有内容都将局限在该区域内。这也意味着在剪辑区域以外进行绘制是没有任何效果的

简单点讲,Canvas的裁切路径和普通的Canvas图形差不多,不同的是它的作用是遮罩,用来隐藏没有遮罩的部分。如下图所示,红边五角星就是裁切路径,所有在路径以外的部分都不会在Canvas上绘制出来。

从上图所示的效果来看,跟上一节介绍的globalCompositeOperationsource-insource-atop差不多的效果。最重要的区别是裁切路径不会在Canvas上绘制东西,而且它永远不受新图形的影响。这些特性使得它在特定区域里绘制图形时相当好用。

clip()使用

上面也说了,Canvas中的clip()方法是裁切区可用于限制图像描绘的区域,具体的用法:

  • 使用Canvas的绘制函数比如,rect()arc()之类的方法选择好绘图区域
  • 使用clip()函数将该区域(由rect()arc()方法指定的绘图区域)设定为裁选区

设定裁选区之后,无论在Canvas上绘制什么,只有落在裁选区内的那部分才能得以显示,其余都会被遮蔽掉

先来看一个示例,绘制一个四个圆而且未使用裁选区:

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/canvas/clip.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部