javascript - 如何使用 CSS 剪辑路径剪辑 Canvas ？

Question

我知道我可以通过使用 getContext('2d') 创建路径来裁剪 Canvas 和设置 globalCompositeOperation .

我注意到有时我可以使用 -webkit-clip-path 裁剪 Canvas , 或 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%);<br/> }

产生这个:

这似乎是正确的。

但是，我注意到如果我改变 Canvas 的高度，它就无法剪裁:

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

产生:

我的假设是它在浮点上有裁剪问题(百分比在像素之间裁剪而不是在像素上裁剪)，但从百分比到像素坐标的变化不会裁剪。

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

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

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

是否有一种稳定的方法来使用 CSS 裁剪 Canvas 元素，或者我是否需要使用 Canvas 上下文方法？

我问的原因是我想尽可能少用 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

(剪辑是在绘制操作发生之前设置的)。

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

更新

关于抗锯齿:实际上对图像应用了抗锯齿，但由于红色，很难检测到它，具体取决于屏幕类型和可能浏览器。放大版: