javascript - 用 Canvas 绘制的星爆形状看起来非常像素化(锯齿)

Question

我正在尝试使用 Canvas 创建“星爆”效果，但线段出现令人难以置信的像素化。我做错了什么吗？

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)而不是 Canvas 。它将消除像素化线条的问题。

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

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