用画布绘制的爆炸形看起来非常像素化(混叠)

| 我正在尝试使用画布创建\“ starburst \”效果,但是这些分割线看起来难以置信地被像素化。难道我做错了什么?
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();
}
    
已邀请:
我建议使用矢量图形(即SVG)代替画布。它将消除像素化线条的问题。 更具体地说,如果您使用Raphael Javascript库,则您的代码实际上是相同的。 额外的好处是Raphael还可以在IE的较早版本中使用,因为如果SVG不可用,它可以检测并切换为使用VML。     
抗锯齿由浏览器完成。现在,您的代码在Firefox 4和IE9中看起来不错,但在Webkit浏览器中效果很差。 chrome / safari的执行方式有很多好处,例如,在chrome上看起来不错,但在Firefox 4上却很差。 人们要求规范作者提供布尔值控制抗锯齿,但他反对这种想法。     

要回复问题请先登录注册