用画布绘制的星爆形状看起来非常像素化（锯齿）

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 库，您的代码可能几乎相同。

额外的好处是 Raphael 还可以在旧版本的 IE 中运行，因为它可以检测到 SVG 不可用时并切换到使用 VML。

Answer 2

抗锯齿由浏览器完成。现在，您的代码在 Firefox 4 和 IE9 中看起来非常出色，但在 webkit 浏览器中看起来很差。

chrome/safari 的做法有一些优点，像这样，看起来不错在 chrome 上可以，但在 Firefox 4 上很差。

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