如何使用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剪輯路徑剪裁畫布？

回答

相關問題