返回

canvas实现多个clip裁剪区域,clip裁剪后如何绘制在外面?

Created By ZOU on Dec 02 2020

最近在写项目的时候想实现overflow的效果,查了一下api发现有个clip的方法,只是裁剪之后所有的绘图都会限制在裁剪区域内,没办法脱离裁剪区域,查了一下w3c,上面是这样描述这个api的:

clip() 方法从原始画布中剪切任意形状和尺寸。

提示:一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存,并在以后的任意时间对其进行恢复(通过 restore() 方法)。

JavaScript 语法:

context.clip();

上面所说的可以通过在clip方法调用之前使用save方法对画布的状态进行保存,之后再restore就可以实现。

具体实现代码如下:

var c = document.getElementById("myCanvas2");
var ctx = c.getContext("2d");
// 保存状态
ctx.save();
// 创建矩形
ctx.rect(50, 20, 200, 120);
// 绘制
ctx.stroke();
// 裁剪路径
ctx.clip();
// 填充颜色为绿色
ctx.fillStyle = "green";
// 绘制填充矩形(绿色的矩形)
ctx.fillRect(0, 0, 150, 100);
// 还原之前保存的状态
ctx.restore()
// 设置填充颜色为红色
ctx.fillStyle = "red";
// 绘制填充矩形(红色的矩形)
ctx.fillRect(100, 0, 150, 100);

最终实现效果如下:

绘制顺序是,先绘制灰色的边框矩形,再绘制绿色矩形,再绘制红色矩形。

绿色矩形被限制在灰色矩形内,通过clip方法,而红色矩形绘制在外面,通过save和restore的配合实现,这样就能做到多个裁剪区域了。

标签: javascript canvas