1

我知道我可以通过使用getContext('2d')和设置创建路径来剪辑画布globalCompositeOperation。

我注意到有时我可以使用-webkit-clip-path或clip-path在其他浏览器上（我在 Chrome 上）剪辑画布，有时我无法：

使用这个 HTML：

<canvas width="300" height="60"></canvas>

和 CSS：

canvas { -webkit-clip-path: polygon(50% 33%, 75% 10%, 80% 80%, 60% 75%, 40% 60%, 20% 10%, 40% 20%, 50% 33%);
}

产生这个：

在此处输入图像描述

这似乎是正确的。

但是，我注意到，如果我改变画布的高度，它无法剪辑：

<canvas width="300" height="250"></canvas>

产生：

在此处输入图像描述

我的假设是它在浮点上裁剪时存在问题（百分比在像素之间而不是像素上裁剪），但是从百分比更改为像素坐标不会裁剪。

*这里分别是他们的 jsfiddle 页面的链接：

有谁知道为什么一个有效而另一个无效？

有没有一种稳定的方法来使用 CSS 剪辑画布元素，还是我需要使用画布上下文方法？

我问的原因是我想尽可能少用js。我有一串坐标，可以很容易地放入 css；而要使用该ctx.beginPath()...ctx.moveTo()...ctx.lineTo()...ctx.lineTo()...方法，我需要为这些点执行一个 for 循环。

另外，我很好奇为什么第一个示例有效，如果有人可以解释的话。谢谢！:)

4

2 回答 2

2

剪辑路径相对较新，可能容易出错（在 Aurora 中对我不起作用）。

为了获得稳定的结果，我建议只使用 canvas'clip()方法（为此您不需要复合）。

您可以通过这种方式提供积分（此处为百分比）：

var path = [50, 33, 75, 10, 80, 80, 60, 75, 40, 60, 20, 10, 40, 20, 50, 33];

几乎就像在 CSS 中定义一样简单。然后有一个函数来解析它：

function addClip(context, path) {

    var w = context.canvas.width,
        h = context.canvas.height;

    context.beginPath();
    context.moveTo(path[0] * w / 100, path[1] * h / 100);
    for(var i = 2; i < path.length; i+=2) {
        context.lineTo(path[i] * w / 100, path[i+1] * h / 100);
    }
    context.closePath();
    context.clip();
}

结果：

在此处输入图像描述

DEMO HERE

（剪辑是在绘图操作发生之前设置的）。

只需将您的绘图操作放在一个函数中，您也可以在调整窗口大小时调用该函数（如上面的演示所示）。

更新

至于抗锯齿：实际上对图像应用了抗锯齿，但由于红色，根据屏幕类型和浏览器可能很难检测到它。放大版：

在此处输入图像描述

于 2013-07-09T19:14:57.570 回答
1

我从未使用过-webkit-clip-path:，但只是根据一般原则，作为一种解决方法，我会尝试将剪辑路径应用于包含画布而不是画布本身的元素。

 <div class='canvas-wrapper'><canvas></canvas></div>

 .canvas-wrapper {
    display: table;   /* shrinkwrap around canvas */
    -webkit-clip-path: ...;
 }
于 2013-07-09T19:16:42.280 回答