谷歌浏览器上的画布错误剪辑

Posted 2023-02-25

【中文标题】谷歌浏览器上的画布错误剪辑

【英文标题】：Canvas wrong clipping on Google Chrome

【发布时间】：2016-04-25 09:29:38

【问题描述】：

我正在尝试使用 javascript 剪辑画布，它在 Mozilla Firefox 中可以正常工作，但在 google 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"  ></canvas>

Rendering comparison

Mozilla 版本：43.0.1 - Chrome 版本：50.0.2661.87 m

【问题讨论】：

那么，你得到了什么结果，它应该是什么样子？

适用于我的 Chrome 版本 26.0.1410.63

结果在这里：[i.stack.imgur.com/qNUot.jpg]

@RolandStarke chrome 26 ???它已经 3 岁了，您应该考虑更新您的浏览器。但也适用于 v50、osX。 OP，你能告诉我们你使用的是哪个版本吗？ here here here 和 here 周围有一些错误报告；可能是相关的。

【参考方案1】：

问题解决了，

而不是：

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

我用：

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

谢谢大家！！！