Geek Answers Handbook

A starburst shape drawn with a canvas appearing very uneven (with a pseudonym)

I'm trying to create a "starburst" effect using a canvas, but the lines of the segments seem incredibly uneven. Am I doing something wrong?

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(); }
+4
source share
2 answers

I would suggest using vector graphics (i.e. SVG) instead of canvas. This will fix your pixel line issues.

In particular, if you use the Raphael JavaScript library, your code may be pretty much the same.

An added bonus is that Raphael also works in older versions of IE, as it can detect and switch to using VML if SVG is not available.

+4
source

Anti-aliasing is performed by the browser. Your code will look great right now in Firefox 4 and IE9, but in webkit browsers it will be bad.

There are pluses to how chrome / safari does it , like this , which will look good on chrome, but bad in Firefox 4.

People asked for a specifier for logical smoothing control, and he was against this idea.

+1
source

More articles:


All Articles