Question

编辑：此错误已在版本38中修复。

最新版本的Chrome在我维护的应用程序中引入了一个问题。我不确定这是不是很奇怪，而且看起来是错的，但实际上是正确的＃34;问题或者它是否是一个诚实的上帝错误，但它只出现在Chrome的最新版本中（大约一个月前开始发生，我不确定哪个版本引入了它）

在使用context arc（）方法绘制的某些路径上使用context fill（）方法时出现错误。填充的是一个奇形怪状的多边形，而不是绘制一个填充的弧。

这里是我的意思 - 右上角的形状应该是一个实心的弧形：

＆＃13;

var ctx = document.getElementById('cvs').getContext('2d');

// draw stroked arc 
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI/2);
ctx.lineTo(125, 125);
ctx.closePath();
ctx.stroke();

// draw filled arc
ctx.beginPath();
ctx.arc(225, 75, 50, 0, Math.PI/2);
ctx.lineTo(275, 125);
ctx.closePath();
ctx.fill();
			
// draw stroked triangle
ctx.beginPath();
ctx.moveTo(125, 225);
ctx.lineTo(75, 275);
ctx.lineTo(125, 275);
ctx.closePath();
ctx.stroke();

// draw filled triangle
ctx.beginPath();
ctx.moveTo(275, 225);
ctx.lineTo(225, 275);
ctx.lineTo(275, 275);
ctx.closePath();
ctx.fill();

＆＃13;

<div><canvas id="cvs" width="300" height="300" style="border: solid black 1px"></canvas></div>

＆＃13;

我的问题是：这个问题有解决方法吗？最好不要求我编写自己的填充弧渲染器。

Answer 1

我确实在OS X上的Chrome 37.0.2062.124上看到了这个错误。这可能与here描述的错误有关，也可能与此无关，该错误据说可以在Chrome 38中修复。

作为一种解决方法，旋转几度并在填充弧线之前立即旋转它似乎有效。

// draw filled arc
ctx.beginPath();
ctx.arc(225, 75, 50, 0, Math.PI/2);
ctx.lineTo(275, 125);
ctx.closePath();
ctx.rotate(1*Math.PI/180); // Rotate 1 degree
ctx.rotate(-1*Math.PI/180); // Reverse rotation
ctx.fill();

这是展示解决方法的小提琴：http://jsfiddle.net/ejacpd1w/1/

Chrome弧路径填充错误的解决方法？

1 个答案: