在谷歌Chrome瀏覽器上畫布錯誤的裁剪

我想用javascript剪裁畫布，它在Mozilla Firefox中正常工作，但谷歌Chrome瀏覽器出現渲染錯誤（不一樣）。我該如何解決它？或者我做錯了什麼？在谷歌Chrome瀏覽器上畫布錯誤的裁剪

這裏是我的代碼：https://jsfiddle.net/xranto/hmrx52nv/

JS：

var canvas = document.getElementById('c'); 
var ctx = canvas.getContext('2d'); 

var img = document.createElement('IMG'); 

img.onload = function() { 
    ctx.save();        
    ctx.beginPath(); 
    ctx.moveTo(31, 145); 
    ctx.lineTo(206, 200); 
    ctx.lineTo(303, 57); 
    ctx.lineTo(469, 378); 
    ctx.lineTo(133, 538); 
    ctx.closePath();     
    ctx.clip();      
    ctx.drawImage(img, 0, 0);        
    ctx.restore(); 
} 


img.src = "http://i.imgur.com/fHaQvTc.jpg";

HTML：

<canvas id="c" width="495" height="654"></canvas>

Rendering comparison

Mozilla的版本：43.0.1 - Chrome版本：50.0 .2661.87米

來源

2016-04-25 xranto

那麼，你會得到什麼樣的結果，它應該是什麼樣子？ – Cerbrus

適用於Chrome版本26.0.1410.63 –

結果在這裏：[http://i.stack.imgur.com/qNUot.jpg] – xranto

問題解決了，

代替：

ctx.closePath();     
ctx.clip();      
ctx.drawImage(img, 0, 0);        
ctx.restore();

我用：

ctx.closePath();     
ctx.fill();  
ctx.globalCompositeOperation = 'source-in'; 
ctx.drawImage(img,0, 0);

謝謝大家！

來源

2016-04-25 11:35:52 xranto

在谷歌Chrome瀏覽器上畫布錯誤的裁剪

回答

相關問題