HTML5 Effects: A canvas based rotating starburst effect - StarBurst.js

Share RGraph:   To help my Google visibility (it can't get much worse!), if you like and use RGraph I'd appreciate it if you could link to me

Summary
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.*

[No canvas support]

Feel free to use it for whatever you wish. It's probably well suited to some sort of photo gallery though.

Get the source code here. Simply include the code in your page and call the StarBurst() function as shown in the examples.

<script>
    // 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.
    StarBurst({
        id: 'cvs',
        segments: 50,
        colors: ['white', 'red'],
        image: '/images/ferrari.jpg',
        imageHalign: 'center',
        imageValign: 'center',
        imageScale: 1,
        imageShadow: true,
        imageShadowOffsetx: 0,
        imageShadowOffsety: 0,
        imageShadowBlur: 50,
        imageShadowColor: '#aaa',
    });
</script>

* Not really. Mines black.

Examples of usage

A basic StarBurst example.
Not much to say about this. It show the StarBurst code being used at its most basic - with no options specified.

A StarBurst example using a callback function.
This page shows a StarBurst example using a callback which gets called on every frame. The callback is a simple function which is passed an object that consists of the configuration.

A StarBurst example using an image.
Like above - this page shows a StarBurst example using an image.

Layout style:     
  

Core

PropertyDescriptionDefault
canvasThe canvas tag object (as returned by document.getElementById() ). You need to give this, the context or the id options.null
contextThe context of the canvas as returned by the getContext() function. You need to give this, the canvas or the id options.null
idInstead 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.null
radiusThe radius of the segments.500
delayThe 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.null
segmentsThe number of segments that are drawn.12
cxThe centerx coordinate.The horizontal center.
cyThe centery coordinate.The horizontal center.
radiusMultiplierIf less than one the rotating arms will grow outwards.1
radiusIncrementThis stipulates how fast the radiusMultiplier will grow.0.1
colorsThis 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']['white', '#666']
callbackOptionally 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.null

Image

PropertyDescriptionDefault
imageThe image to show in the center (if desired).null
imageGrowThis stipulates over how many frames the image grow to the desired scale.0 (disabled)
imageScaleIf specified this stipulates by how much the image is scaled up (ie 2x/3x/4x/5x etc).1
imageHalignThe horizontal alignment of the image.center
imageValignThe vertical alignment of the image.center
imageXIf you want you can specify the exact X coordinate of the image.null
imageYIf you want you can specify the exact Y coordinate of the image.null
imageShadowEnable this if you want the image to have a shadow.false
imageShadowOffsetxThe X offset of the shadow.null
imageShadowOffsetyThe Y offset of the shadow.null
imageShadowColorThe color of the shadow.null
imageShadowBlurThe extent of the blurring effect for the shadow.null