如何用CSS剪辑路径剪辑画布？

Question

我知道我可以通过创建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页面的链接：

• http://jsfiddle.net/bozdoz/hMTgc/
• http://jsfiddle.net/bozdoz/5H2Y2/

有谁知道为什么一个有效但另一个没有？

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

我问的原因是我想在可能的情况下使用更少的js。我有一串坐标，我可以轻松放入css;然而，要使用ctx.beginPath()...ctx.moveTo()...ctx.lineTo()...ctx.lineTo()...方法，我需要为点进行for循环。

另外，我很好奇为什么第一个例子有效，如果有人能解释的话。谢谢！ ：）

Answer 1

剪辑路径是相对较新的，可能容易出错（在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

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

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

<强>更新

至于反别名：实际对图像应用了反别名，但由于红色，很难检测到它取决于屏幕类型，也许浏览器。放大版本：

Answer 2

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

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

 .canvas-wrapper {
    display: table;   /* shrinkwrap around canvas */
    -webkit-clip-path: ...;
 }