Canvas 图像裁剪

裁剪用于隐藏部分我们不想看到的图形

Canvas 中的裁剪和 Photoshop 中的裁剪不一样,Photoshop 中的裁剪针对的是图形,而 Canvas 中的裁剪针对的是画布本身

Canvas 中的裁剪只有一种方法,就是根据路径来裁剪

比如我们有一个画布,画布上有一张图片和一个五角星的路径

现在我们只想显示五角星里的图片,那么在 Canvas 裁剪就会得到

为什么五角都有白色区域,那是因为我们图片不够大,露出了屏幕了..

Canvas 提供了 clip() 方法来做到这一点

Canva clip() 方法

ctx.clip() 方法将当前路径设置为剪切路径

语法

void ctx.clip();
void ctx.clip(fillRule);
void ctx.clip(path, fillRule);
参数 说明
fillRule 裁剪算法,用于设置判断一个点是在路径内还是在路径外,可选的值有
"nonzero": 非零环绕原则,默认的原则
"evenodd": 奇偶环绕原则
path 需要剪切的 Path2D 路径

fillRule 详细的介绍,可以参考 Canvas 填充路径 fill()

默认情况下,canvas 有一个与它自身一样大的裁切路径(也就是没有裁切效果)

如果和上一章节介绍的 globalCompositeOperation 属性作一比较,它可以实现与 source-insource-atop 差不多的效果

最重要的区别是裁切路径不会在 canvas 上绘制东西,而且它永远不受新图形的影响

这些特性使得它在特定区域里绘制图形时相当好用

范例

我们使用 clip() 方法来实现一个 1/4 圆效果

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="300" height="200">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.arc(100, 100, 75, 0, Math.PI*2, false);
ctx.clip();
ctx.fillRect(0, 0, 100,100);
ctx.fillStyle="green";
ctx.fillRect(100, 100, 100,100);
ctx.fillStyle="red";
ctx.fillRect(40, 40, 30,30);
</script>

运行结果如下



使用起来是不是很简单,简直不要太好

其实就是先画一个路径,然后调用 clip() 说我要裁剪接下来的图形,而且终身有效

如果不需要了,那么可以在调用 clip() 前先调用 save() 保存状态,然后再使用完后调用 restore() 恢复状态

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-2" width="300" height="200">
</canvas>

<script>
var c2   = document.getElementById("canvas-2");
var ctx2 = c2.getContext("2d");
ctx2.save();
ctx2.arc(100, 100, 75, 0, Math.PI*2, false);
ctx2.clip();
ctx2.fillRect(0, 0, 100,100);
ctx2.fillStyle="green";
ctx2.fillRect(100, 100, 100,100);
ctx2.restore();
ctx2.fillStyle="red";
ctx2.fillRect(40, 40, 30,30);
</script>

运行结果如下



Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.