Форма звездообразования, нарисованная на холсте, выглядит очень неровно (с псевдонимом)

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) вместо холста. Это устранит ваши проблемы с пиксельными линиями.

В частности, если вы используете библиотеку Javascript Raphael , ваш код может быть практически таким же.

Дополнительным бонусом является то, что Raphael также работает в более старых версиях IE, поскольку он может обнаруживать и переключаться на использование VML, если SVG недоступен.

Answer 2

Сглаживание выполняется браузером. Прямо сейчас ваш код будет отлично выглядеть в Firefox 4 и IE9, но плохо в браузерах webkit.

Есть плюсы в том, как это делает Chrome / Safari, вот так , что будет хорошо смотреться на Chrome, но плохо на Firefox 4.

Люди просили специалиста по булевому управлению сглаживанием, и он был против этой идеи.