HTML5画布圆弧在Google Chrome中无法正确显示 [英] HTML5 canvas arcs not rendering correctly in Google Chrome
问题描述
下面的代码在IE9和FireFox中呈现了一个破碎的环，但在Chrome中的圆圈部分失败。任何想法为什么，或者我可以做什么，使其在所有浏览器中呈现？
The code below renders a broken ring nicely in IE9 and FireFox, but fails part way round the circle in Chrome. Any ideas why, or what I can do to make it render in all browsers?
干杯
版本15.0.874.121）
(Chrome version 15.0.874.121)
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas1" width="201" height="201">No canvas in your browser...sorry...</canvas>
<script>
var canv = document.getElementById('canvas1');
var ctx = canv.getContext('2d');
var size = 201;
var centerX = size / 2;
var centerY = centerX;
var i;
var PI_180 = Math.PI / 180;
var fill = true;
size = size / 2;
ctx.translate(centerX, centerY);
// broken ring
for (i = 0; i < 360; i += 15) {
fill = !fill;
ctx.beginPath();
ctx.arc(0, 0, size * 0.86, i * PI_180, (i + 15) * PI_180, false);
ctx.arc(0, 0, size * 0.75, (i + 15) * PI_180, i * PI_180, true);
ctx.closePath();
if (fill) {
ctx.fill();
}
ctx.stroke();
}
ctx.translate(-centerX, -centerY);
</script>
</body>
</html>
推荐答案
它在Chrome 16,17和18 。
It works perfectly in Chrome 16, 17, and 18.
Chrome的画布开发进度非常快，他们在过去一年中打破了各种各样的事情。抗锯齿，文本失真和路径在一些尺度上没有出现的问题都已经变成了稳定版本的Chrome，他们可能会留下一个或两个（主要）错误。
Chrome's canvas development is very fast paced and they've been breaking various things on and off for the past year. Problems of anti-aliasing, text distortion, and paths not showing up at all in some scales have all made it into the stable version of Chrome, where they might leave the (major) bugs for a week or two.
每当你怀疑Chrome中的一个错误，它总是值得看看dev和canary版本的反应。因为这些原因，我发展与他们两个开放，从一个切换到另一个，如果有一个明显的断裂。有趣的是，你会看到错误得到修改，然后一个月后，人们会抱怨在稳定版本中的错误！
Whenever you suspect a bug in Chrome its always worth looking at how the dev and canary versions react. For these reasons I develop with both of them open, switching from one to the other if something is obviously broken. The funny thing is that you'll see bugs get made and fixed, and then one month later people will be complaining about the bug in the stable version!
这篇关于HTML5画布圆弧在Google Chrome中无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
