canvas画布的clip方法

马黑黑 · 发表于 2022-8-14 21:58

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-8-14 22:02 编辑

HTML5中的画布有裁剪方法，clip()，使用时不需要任何参数。但 clip() 方法基于路径，通常使用它之前应先开启路径，然后根据上文的绘制图片当成自己的裁剪区域。

为了简化实例，我们所举的例子仅一个画布标签，我们给它添加了一个边框样式，以便在观察效果时能看得清楚一些：

<canvas id="canv" style="border: 1px solid red"></canvas>

下来就是用JS对画布进行操作了：

<script>

let w = canv.width = 400, //设定画布宽度
      h = canv.height = 400;  //设定画布高度度
let ctx = canv.getContext('2d');  //指定画笔

ctx.beginPath();  //开启路径
ctx.fillStyle = 'green'; //填充色为绿色（测试用，裁剪并不需要设定颜色）
ctx.rect(100, 100, 200, 200);  //在{100，100}处开始绘制一个 200*200 的矩形
ctx.fill(); //填充（必须）
ctx.clip(); //clip方法将前面的绘制图形作为裁剪区域

//尝试在画布上画一个全幅红色矩形。结果：全幅无效，只能在clip区域绘制
ctx.fillStyle = 'red'; //填充色为红色
ctx.fillRect(0, 0, w, h); //绘制全幅矩形

</script>

我们没有使用 ctx.closePaht() 来关闭路径，这是因为凡用 fill 方法，画笔会自动关闭路径（关闭处在新路径开启前）。

clip() 裁剪依赖于前面绘制的图形，亦即它的启用要配合一个绘制过程，紧跟在绘制动作完成之后启用 clip() 方法。

clip() 方法通常还应配合画笔的 save() 和 restore() 方法，以便保存和恢复裁剪前的画布状态。