相同的电话电弧产生不同大小

我试图找出为什么绘制形状，然后绘制了它在新的颜色（如虽然以突出显示它），然后重新绘制原始（未突出显示）正在留下高亮颜色的痕迹。相同的电话电弧产生不同大小

我在this fiddle再现的问题。楔形物以浅蓝色绘制。有一个红色按钮将以红色绘制，然后是另一个重新绘制原始形状的按钮。所有参数都是相同的（除了颜色），但是在点击按钮重置颜色后，楔子上会有一丝微弱的红色。

前：

enter image description here

后：

enter image description here

下面是相关代码：

drawWedge(250, 250, 200, 0, 18, "rgb(150, 254, 223)"); 

$("#red").click(function() { 
    drawWedge(250, 250, 200, 0, 18, "rgb(255, 0, 0)"); 
}); 

$("#back").click(function() { 
    drawWedge(250, 250, 200, 0, 18, "rgb(150, 254, 223)"); 
}); 

function d2r(degrees) { 
    return degrees * (Math.PI/180.0); 
} 

function drawWedge(centerX, centerY, r, start, end, color) { 
    context.beginPath(); 
    context.moveTo(centerX, centerY); 
    context.arc(centerX, centerY, r, d2r(start), d2r(end), false); 
    context.closePath(); 
    context.fillStyle = color; 
    context.fill(); 
}

来源

2012-01-12 Adam Rackis

你是故意不清除绘制新的帧之前的印刷品吗？如果没有，那么解决方法是简单的：http://jsfiddle.net/X7deh/1/ – Esailija 2012-01-12 23:06:20

@Esailija - 刚学的画布，所以我不会刻意做什么。抛出 - 这是正确的答案。 – 2012-01-12 23:16:35

@Esailija - 我只是查了一下这个方法，看起来它的名字就是这么做的。我无法真正清除这个楔子周围的矩形，因为旁边会有很多其他的东西。（我正在制作饼图以获得乐趣）。有没有clearArc方法，所以你会推荐什么 – 2012-01-12 23:19:52

当在画布上绘画，它只是不断stacking things on top of each other until you clear it。要清除它最简单的方法是ctx.clearRect(0,0,width,height)

我把你的drawWedge功能在这里：

http://jsfiddle.net/X7deh/1

来源

2012-01-12 23:18:29 Esailija

看到我上面的评论。因此，如果我制作饼图，您是否会建议我只清除整个图表并重新绘制，以便突出显示/忽略楔形图？这似乎很难有效 – 2012-01-12 23:21:01

@AdamRackis你是正确的，这是不高效的。迟早你必须清理画布并画一个新的画框。要突出显示，您将重新绘制具有不同颜色的突出楔形的整个饼图。如果有帮助的话，我从来没有遇到任何性能问题。 – Esailija 2012-01-12 23:24:48

每次重绘都会让我的代码变得更加清晰，所以我会追求这一点，但出于好奇，你知道为什么这个例子不起作用吗？这些弧线的大小不一样吗？ – 2012-01-12 23:40:14

这个问题已经回答了，但我想给一点更透彻的解释。

enter image description here

当你画对角线处，你穿过（在我的例子显示）的像素“零件”。那么浏览器对形状外部的像素部分做了什么？它使用抗锯齿（对于浏览器，抗锯齿始终处于默认状态）以对像素的其余部分着色（如果您没有抗锯齿，则锯线看起来会锯齿状）。如果你注意到，红色的微弱的痕迹不是鲜红的，因为它由于抗锯齿而变得混合。而你看到它的原因是因为当你在画布上绘制你的形状时，红色的微弱的痕迹不是你的形状的一部分，而是你的形状外部像素的一部分。

现在的答复中提到，您可以拨打clearRect清除画布。但是，您应该阅读这个SO question，因为它更详细地解释了事情（所选答案不如第二个答案）。此外，有没有想过为什么他们称之为“画布”？想想艺术家使用的实际艺术画布，一旦他们在画布上画画，除非您获得新的画布或画布，否则无法取下它！

来源

2012-01-13 00:00:05

良好的信息，谢谢你！ – 2012-01-13 00:07:06

相同的电话电弧产生不同大小

回答

相关问题