canvas详解07-裁剪

秒速五厘米 2023-10-12 19:55 96阅读 0赞

裁切路径

a071f2b37c18cf45aea4b9ac75430994.png

裁切路径和普通的 canvas 图形差不多，不同的是它的作用是遮罩，用来隐藏不需要的部分。如右图所示。红边五角星就是裁切路径，所有在路径以外的部分都不会在 canvas 上绘制出来。

如果和上面介绍的 globalCompositeOperation 属性作一比较，它可以实现与 source-in 和 source-atop差不多的效果。最重要的区别是裁切路径不会在 canvas 上绘制东西，而且它永远不受新图形的影响。这些特性使得它在特定区域里绘制图形时相当好用。

在 绘制图形 一章中，我只介绍了 stroke 和 fill 方法，这里介绍第三个方法clip。

clip()

将当前正在构建的路径转换为当前的裁剪路径。

我们使用 clip()方法来创建一个新的裁切路径。

默认情况下，canvas 有一个与它自身一样大的裁切路径（也就是没有裁切效果）。

#clip的例子

这个例子，我会用一个圆形的裁切路径来限制随机星星的绘制区域。

  1. function draw() {
  2.   var ctx = document.getElementById('canvas').getContext('2d');

发表评论

表情：
评论列表 （有 0 条评论，96人围观）

还没有评论，来说两句吧...

相关阅读

    相关 canvas反向裁剪技巧

    我们都知道在canvas 可以通过clip来实现剪裁功能，其步骤一般是先设置要裁剪的区域（路径），然后通过ctx.clip()的实现裁剪，裁剪之后，后续的绘制只能在裁剪的区域显

    缺乏、安全感缺乏、安全感/ 0 赞/ 269 阅读

    相关 canvas反向裁剪技巧

    我们都知道在canvas 可以通过clip来实现剪裁功能，其步骤一般是先设置要裁剪的区域（路径），然后通过ctx.clip()的实现裁剪，裁剪之后，后续的绘制只能在裁剪的区域显

    小鱼儿小鱼儿/ 0 赞/ 427 阅读