用画布绘制的星形外观非常像素化（锯齿状）。

Question

我正在尝试使用画布创建“星形”效果，但是分段线看起来非常像素化。 我做错了什么吗？

var rays = 40;
var canvas = $("header canvas")[0];
var ctx = canvas.getContext("2d");

var centre = [canvas.width*0.2,canvas.height*0.90];
var radius = Math.sqrt(Math.pow(canvas.width,2)+Math.pow(canvas.height,2));
var colours = ["red","white"];

var segment = 2*Math.PI/rays;

for(var i=0;i<rays;i++){
    ctx.beginPath();
    ctx.moveTo(centre[0], centre[1]);
    ctx.arc(
        centre[0], 
        centre[1],
        radius,
        segment * i,
        segment * (i+1),
        false
    );
    ctx.lineTo(centre[0], centre[1]);
    ctx.closePath();
    ctx.fillStyle = colours[i % colours.length];
    ctx.fill();
}

- Gausie

---

画布的尺寸是多少？在我看来，它看起来相当不错。顺便说一句，我喜欢这个输出。 - Khez

你在尝试哪些浏览器？我知道 Webkit 通常默认使用别名。 - Please treat your mods well.

Answer 1

我建议使用向量图形（即SVG）而不是画布。这将消除您的像素化线条问题。

更具体地说，如果您使用Raphael JavaScript库，则代码几乎可以相同。

额外的好处是，如果SVG不可用，Raphael也可以在旧版本的IE中工作，因为它可以检测并切换到使用VML。

- Spudley

Answer 2

抗锯齿是由浏览器完成的。现在你的代码在Firefox 4和IE9中看起来很好，但在Webkit浏览器中效果较差。

Chrome/Safari的做法有一些优点，像这样, 这在Chrome上看起来很好，但在Firefox 4上效果较差。

人们曾向规范撰写者提出了一个控制抗锯齿的布尔值，并且他反对这个想法。

- Simon Sarris

---

是的，在最新的Chrome 10.0.648.205中尝试过了，看起来很好。 - Alnitak

Alnitak，Chrome 12上的小提琴看起来比FF4糟糕。左边是Firefox，右边是Chrome：http://i.imgur.com/MqvTa.png - Simon Sarris

在MacOS X上的Chrome 10上看起来很完美，但有点奇怪。 - Alnitak