I wanted to recreate the classic kids' book sun ray effect - but have it animating and drawing in HTML canvas. You can see it in action below or on my server's default page.
Okay, so for starters you need to initialize the canvas object. I'm going to assume because you're here, you know how to do that, so I'm going to skip over explaining that portion of the code.
So, to do this, we're going to need to get the co-ordinates of certain points from the outside of a circle. There are probably other, more efficient ways to do it, but this to me seems like the easiest way.
The canvas bounds are marked in yellow. The co-ordinates we need to draw are marked on the diagram - once we have those, we can then draw each ray with the following code:
context.moveTo(mX, mY); context.lineTo(c1X, c1Y); context.lineTo(c2X, x2Y); context.lineTo(mX, mY); context.fill();
So you feed it the midpoint co-ordinates, length and angle (in radians), and it returns an object with X and Y co-ordinates.
Now all we need to do is iterate a loop that can supply that function with radians, and put everything together.
And if you want to animate them as I have, all you need to do is call the above code on a timer, and increment an "offset" value. The offset value is then added to the "angle" value as it is calculated, resulting in rays at a slightly different rotation.
Below is the full code from this project in object form - to use it, include it in your page and call it like this:
rays.init('canvasID', 'colour1', 'colour2');
You can see it in action on my server's default page.