如何在Chrome Windows下的HTML5畫布中反鋸齒clip（）邊緣？

Question

我在畫布上使用了clip（）函數。

結果：

正如你可以看到Chrome版本有可怕的鋸齒/走樣沿邊緣。我該如何解決？

代碼重現：

http://jsfiddle.net/ZRA76/：

<canvas id="test" width="300" height="300"></canvas>​ 

<script type="text/javascript"> 
    cv = document.getElementById("test"); 
    ctx = cv.getContext("2d"); 

    var im = new Image(); 
    im.onload = function() { 
     ctx.beginPath(); 
     ctx.arc(110, 110, 100, 0, 2*Math.PI, true); 
     ctx.clip(); 
     ctx.drawImage(im, 0, 0); 
    } 
    im.src = "http://placekitten.com/300/300"; 
</script> 

Answer 1

從答案

上Can I turn off antialiasing on an HTML <canvas> element?看來，它是針對特定瀏覽器。它甚至是google代碼鉻項目上的一個活躍bug report。對不起，現在看起來你運氣不好。

Answer 2

使用svg剪輯。像魅力一樣工作，但不便於使用。

Answer 3

我遇到了與Chrome和clip（）相同的問題。

在我的情況下，我通過設置畫布globalCompositeOperation實現了更好的瀏覽器兼容性。

context.globalCompositeOperation = 'source-atop'; 

所以在這種情況下繪製你的形狀，一個圓圈。然後切換到'source-atop'並繪製你的小貓圖像。

請注意，這是基本繪圖的快速修復，並假定爲空白畫布。之前的畫布繪製會影響您的剪輯。

Answer 4

我對此的修復是在繪製圖像後在相同的半徑處繪製薄（2px）的白色筆劃。它很好地覆蓋了別名，並且在瀏覽器中看起來很好。

Answer 5

如果您正在執行復雜的分層繪製，則可以使用globalCompositeOperation在另一個臨時畫布中模擬剪切。然後，您可以使用drawImage將臨時畫布複製回原始畫布。我不能保證這種方法的性能，但這是我知道得到你想要的唯一方法。

//set-up - probably only needs to be done once 
var scratchCanvas = document.createElement('canvas'); 
scratchCanvas.width = 100; 
scratchCanvas.height = 100; 
var scratchCtx = scratchCanvas.getContext('2d'); 


//drawing code 
scratchCtx.clearRect(0, 0, scratchCanvas.width, scratchCanvas.height); 

scratchCtx.globalCompositeOperation = 'source-over'; //default 

//Do whatever drawing you want. In your case, draw your image. 
scratchCtx.drawImage(imageToCrop, ...); 


//As long as we can represent our clipping region as a single path, 
//we can perform our clipping by using a non-default composite operation. 
//You can think of destination-in as "write alpha". It will not touch 
//the color channel of the canvas, but will replace the alpha channel. 
//(Actually, it will multiply the already drawn alpha with the alpha 
//currently being drawn - meaning that things look good where two anti- 
//aliased pixels overlap.) 
// 
//If you can't represent the clipping region as a single path, you can 
//always draw your clip shape into yet another scratch canvas. 

scratchCtx.fillStyle = '#fff'; //color doesn't matter, but we want full opacity 
scratchCtx.globalCompositeOperation = 'destination-in'; 
scratchCtx.beginPath(); 
scratchCtx.arc(50, 50, 50, 0, 2 * Math.PI, true); 
scratchCtx.closePath(); 
scratchCtx.fill(); 


//Now that we have a nice, cropped image, we can draw it in our 
//actual canvas. We can even draw it over top existing pixels, and 
//everything will look great! 

ctx.drawImage(scratchCanvas, ...); 

我們在臨時畫布中這樣做的原因是，目標輸入是一個非常具有破壞性的操作。如果你已經在主畫布上繪製了一些東西（也許你在背景中放下了一個很好的漸變），然後想要繪製剪裁的圖像，剪裁圓也會剪掉你已經繪製的所有東西。當然，如果你的特定情況比較簡單（也許你想繪製的圖像是一個剪輯圖像），那麼你可以放棄臨時畫布。

可以玩弄於my demo page不同的修剪模式。底行（帶漸變）對你來說並不是太有用，但最上面的一行（與圓形和方形）更相關。

編輯

哎呦，我不小心forked your JSFiddle來演示該技術。