用画布绘制的星暴形状看起来非常像素化(有锯齿)

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();
}

Answer 1

我建议使用矢量图形(即SVG)而不是画布。它将消除像素化线条的问题。

更具体地说，如果您使用Raphael Javascript库，那么您的代码实际上可能是相同的。

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

Answer 2

抗锯齿由浏览器完成。现在，你的代码在Firefox4和IE9上看起来很棒，但在webkit浏览器上就差了。

chrome/safari做这件事的方式有很多优点，like this，它在chrome上看起来不错，但在Firefox4上就差了。

人们要求规范编写者提供一个控制抗锯齿的布尔值，他反对这个想法。