如何在Chrome Windows下的html5画布中消除alias clip（）边缘？

我正在画布上使用clip（）函数

结果:

正如您所见，chrome版本的边缘有可怕的锯齿/锯齿。我该如何解决这个问题

要复制的代码：

:

​
cv=document.getElementById（“测试”）；
ctx=cv.getContext（“2d”）；
var im=新图像（）；
im.onload=函数（）{
ctx.beginPath（）；
ctx.arc（110110100,0,2*Math.PI，真）；
ctx.clip（）；
ctx.drawImage（im，0，0）；
}
im.src=”http://placekitten.com/300/300";

从上面的答案来看，它似乎是特定于浏览器的。它甚至是google code chromium项目中的一个活跃项目。很抱歉，但看起来你现在运气不好。

使用svg剪辑。使用起来很有魅力，但使用起来并不方便。

我在Chrome和clip（）上遇到了同样的问题

在我的情况下，我通过设置canvas GlobalComposite操作实现了更好的浏览器兼容性

context.globalCompositeOperation = 'source-atop';

所以画出你的形状，在这种情况下画一个圆。然后切换到“源上”并绘制您的小猫图像

---

注意，这是基本绘图的快速修复，并假定画布为空白。先前的画布绘制将影响您的剪辑。

我的修复方法是在绘制图像后，在相同半径处绘制一个细（2px）白色笔划。它很好地掩盖了别名，并且在浏览器中看起来很好。

如果您正在进行复杂的分层绘制，您可以使用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, ...);

我们在scratch画布中这样做的原因是中的destination是一个相当具有破坏性的操作。如果你已经在主画布上画了一些东西（也许你在背景中放了一个很好的渐变），然后想画一个剪辑过的图像，那么剪辑圈也会把你已经画过的所有东西都剪掉。当然，如果您的特定情况更简单（可能您只想绘制一幅剪裁过的图像），那么您可以放弃使用scratch画布

您可以在屏幕上使用不同的剪辑模式。最下面一行（带有渐变）对您来说不是太有用，但是最上面一行（带有圆圈和正方形）更相关

编辑

---

哎呀，我无意中演示了这项技术。

我也遇到了这个问题。我所做的是在图片后面的同一个地方画一个半径大1或2像素的圆。保持颜色相似，你就可以得到“抗锯齿”的图像剪辑了。这是个好主意！谢谢我今天已经为此奋斗了一个多小时，这是一个简单而神奇的解决方案：）是的，这个，聪明，这个解决方案表现得非常好，谢谢。一个圆弧用于剪辑，一个圆弧用于笔划。简单。我相信scratch canvas解决方案对于这个问题来说过于复杂和缓慢，除非你有一些不想要笔划的问题。我能够应用这个，再加上“背面画布”技术，来减少在画布上运行视频时出现的严重锯齿边：谢谢你的分享。先生，你救了我一天！现在，该缺陷修复程序在中处于开发状态。如中所述，其他浏览器（如Firefox、Safari）

clip（）

都是抗锯齿的。

//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, ...);