This is an example of a canvas based rotating StarBurst background effect.
Here's an example of a canvas based rotating StarBurst effect
that you could use as the background for photos. It's very
configurable and there are numerous examples of its use linked
below. Here's an example of it rotating nicely behind a photo
of my car.*
Feel free to use it for whatever you wish. It's probably best
suited to some sort of photo gallery though.
// Start the drawing going and pass it an object of options.
// One of these options can be a callback that's called on
// every frame.
colors: ['white', 'red'],
* Not really. Mines black.
Examples of usage
A basic StarBurst example.
Not much to say about this. It shows the StarBurst code being
used at its most basic - with no options specified.
The canvas tag object (as returned by document.getElementById() ). You need to give this, the context or the id options.
The context of the canvas as returned by the getContext() function. You need to give either this, the canvas or the id options.
Instead of the canvas or context objects you can give this and the StarBurst function will get the canvas using the document.getElementById() function. You need to give this, the context or the canvas options.
The radius of the segments.
The delay used by the setTimeout() function. Smaller values will result in a faster animation. NOTE: By default the animation will use the newer requestAnimationFrame() function which does not use a user-specified delay - by setting this to a number you will cause the animation to use the setTimeout() function instead.
The number of segments that are drawn.
The center X coordinate.
The horizontal center.
The center Y coordinate.
The vertical center.
If this is less than one the rotating arms will grow outwards.
This stipulates how fast the radiusMultiplier will grow.
This can be a string consisting of a single color, an array consisting of a single color, or an array consisting of any number of colors to be used in the gradient. If you want solid colors then you could do this: ['red', 'red']
Optionally you can specify a callback function that's run at the end of each frame. The callback is passed the options that you give to the StarBurst function. The callback function runs at the end of each frame and as a result it may run up to 60 times a second.
The image to show in the center (if desired).
This stipulates over how many frames the image will grow to the desired scale.
If specified this stipulates by how much the image is scaled up (ie 2x/3x/4x/5x etc).
The horizontal alignment of the image.
The vertical alignment of the image.
If you want to you can specify the exact X coordinate of the image.
If you want to you can specify the exact Y coordinate of the image.
Enable this if you want the image to have a shadow.