HTML5 Effects: A canvas based rotating starburst effect - StarBurst.js
Posted on 25th June 2017
This is an example of a canvas based rotating starburst background effect.
Here's an example of a canvas based rotating star burst 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 well
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 is called on
// *every* frame.
colors: ['white', 'red'],
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 this, the canvas or the id options.
Instead of the canvas or context objects you can giv 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 setTimeout. 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 centerx coordinate.
The horizontal center.
The centery coordinate.
The horizontal center.
If 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 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 you can specify the exact X coordinate of the image.
If you want you can specify the exact Y coordinate of the image.
Enable this if you want the image to have a shadow.