html - 保存/恢复会影响 HTML5 画布中的 clip() 吗？

Question

我试图画一个“标注”。当我打电话clip()时，它似乎受到标注部分的影响。

做save()和restore()不影响clip()？

canvas = document.getElementById('Canvas');
ctx = canvas.getContext('2d');  

//callout part
ctx.save();
ctx.moveTo(location[0].x, location[0].y);
ctx.lineTo(location[1].x, location[1].y);
ctx.lineTo(location[2].x, location[2].y);
ctx.lineTo(location[3].x, location[3].y);
ctx.lineTo(location[3].x, location[4].y);
ctx.lineTo(location[4].x, location[4].y);
ctx.lineTo(location[4].x, location[3].y);
ctx.lineTo(location[2].x, location[2].y);
ctx.stroke();
ctx.restore();

//text part
ctx.save();
ctx.rect(location[3].x, location[3].x, location[4].x - location[3].x, location[4].y - location[3].y);
ctx.clip();
ctx.fillText('test', location[3].x + 5 , location[3].y + 5);
ctx.restore();

标签： htmlcanvas

Answer 1

是的save()，restore()确实保存和恢复剪辑区域，但他们不保存和恢复当前的子路径声明。

您需要在调用ctx.beginPath()之前调用rect()，否则此矩形将添加到先前的子路径中，并且所有这些都将用于剪辑。

所以这意味着您的第一个保存/恢复块是无用的，因为它保存的任何内容都没有被修改：

canvas = document.getElementById('Canvas');
ctx = canvas.getContext('2d');  

//callout part
ctx.beginPath();
ctx.moveTo(location[0].x, location[0].y);
ctx.lineTo(location[1].x, location[1].y);
ctx.lineTo(location[2].x, location[2].y);
ctx.lineTo(location[3].x, location[3].y);
ctx.lineTo(location[3].x, location[4].y);
ctx.lineTo(location[4].x, location[4].y);
ctx.lineTo(location[4].x, location[3].y);
ctx.lineTo(location[2].x, location[2].y);
ctx.stroke();

//text part
ctx.save();
ctx.beginPath();
ctx.rect(location[3].x, location[3].x, location[4].x - location[3].x, location[4].y - location[3].y);
ctx.clip();
ctx.fillText('test', location[3].x + 5 , location[3].y + 5);
ctx.restore();