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

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

我注意到，有时我能夹了画布-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%); }

产生这样的：

enter image description here

这似乎是正确的。

然而，我发现，如果我改变画布的高度，它未能夹：

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

生产：

enter image description here

我的假设是它在浮点上有一个问题（百分比在像素之间而不是在像素上），但是从百分比变为像素坐标s不剪辑。

*以下是链接到他们的jsfiddle页面分别为：

有谁知道为什么一个作品，但其他没有？

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

我问的原因是我想尽可能少用js。我有一串可以轻松放入css的坐标;而要使用ctx.beginPath()...ctx.moveTo()...ctx.lineTo()...ctx.lineTo()...方法，我需要为点做一个循环。

另外，我很好奇为什么第一个例子工作，如果任何人都可以解释。谢谢！ :)

来源

2013-07-09 bozdoz

剪辑路径是相对较新的，并且可能容易出错（在Aurora中对我无效）。

对于稳定结果我会建议只使用画布'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(); 
}

结果：

enter image description here

DEMO HERE

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

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

更新

至于抗混叠：有 ~~实际上~~ 应用抗混叠 ~~的形象，但因为红颜色的，可能很难检测到它~~ 根据 ~~类型的屏幕也许是~~ 浏览器。放大版：

enter image description here

来源

2013-07-09 19:14:57 K3N

感谢肯。这是一个很好的工作示例。我实际上是要避免使用'clip（）'方法，以便我可以得到具有抗锯齿功能的多边形（更平滑的边缘，就像CSS一样）：http://jsfiddle.net/bozdoz/TB9rX/任何想法为什么我的第一个例子工作，但其他人没有？ – bozdoz

@bozdoz我只能推测，但它似乎是一个错误。如果元素在应用剪辑后调整大小，剪辑似乎会丢失。你可以通过用JS重新应用css-class来测试：'document.getElementById（'canvas'）。className ='canvas';'（当然你需要改变CSS以使规则成为类）。 – K3N

@bozdoz作为抗锯齿：尝试这一行：'context.translate（0.5，0.5）;'更新的小提琴：http://jsfiddle.net/AbdiasSoftware/CmaUy/2/（答案中的图像确实有抗锯齿，但与红色，它可能很难看到它取决于屏幕的类型）。 – K3N

我从来没有与-webkit-clip-path:工作，但只是一般原则，我想尝试，作为一种解决方法，包含画布应用夹路径元素，而不是画布本身的。

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

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

来源

2013-07-09 19:16:42

我也试过了。似乎是相同的结果。 – bozdoz

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

回答

相关问题