A rotating StarBurst effect

An introduction to the StarBurst effect

The StarBurst object is a self-contained spinning background for canvas. You can use it as a background to your RGraph charts or in your own projects. To this end, the class is totally self-contained - relying on no external libraries.

The example on the right is a basic "out-of-the-box" one which has not been configured with any options. The code to achieve this is as follows:

<!-- Include the StarBurst library file  -->
<script src="RGraph.starburst.js"></script>

<script>
    new RGraph.StarBurst({
        id: 'cvs',
        options: {
        }
    }).draw();
</script>

At its most basic that really is all there is to it! This produces the example that you can see above. There are of course options available to you that allow you to configure it to your own tastes and these are shown below.

Using the Starburst class with an SVG chart

Despite being based on canvas you can still use the StarBurst as a background to an svg chart by placing a canvas tag at the rear of the svg tag. For example, you could have some html code like this on your page where you want the chart to appear.

<div style="position: relative; width: 600px; height: 250px">
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
    <div style="width: 600px; height: 250px; position: absolute; top: 0; left: 0" id="cc"></div>
</div>

All this does is put the canvas tag at the back of the div tag that the chart sits in.

<script>
    new RGraph.StarBurst({
        id: 'cvs',
        options: {
        }
    }).draw();
    
    new RGraph.SVG.Bar({
        id: 'cc',
        data: [4,8,6,5,4,5,3],
        options: {
            backgroundGrid: false
        }
    }).draw();
</script>

API

Configuration properties

PropertyDescriptionDefault
radiusThis is the radius of the rotating arms. If your canvas is large enough you may want to increase this.500
delayThis can be used to control the frame rate when the StarBurst is rotating. Normally this is null and the requestAnimationFrame function is used. When a delay is specified however the setTimeout function is used instead.null
segmentsThis allows you to stipulate the number of rotating segments that there are.12
centerxThis property allows you to specify the center X coordinate. Ordinarily, the Starburst uses the center point of the canvas.null
centeryThis property allows you to specify the center Y coordinate. Ordinarily, the Starburst uses the center point of the canvas.null
radius
This is the radius of the rotating arms. If your canvas is large enough you may want to increase this.
Default: 500

delay
This can be used to control the frame rate when the StarBurst is rotating. Normally this is null and the requestAnimationFrame function is used. When a delay is specified however the setTimeout function is used instead.
Default: null

segments
This allows you to stipulate the number of rotating segments that there are.
Default: 12

centerx
This property allows you to specify the center X coordinate. Ordinarily, the Starburst uses the center point of the canvas.
Default: null

centery
This property allows you to specify the center Y coordinate. Ordinarily, the Starburst uses the center point of the canvas.
Default: null

Callback properties

PropertyDescriptionDefault
callbackIf you have custom drawing to do and the StarBurst is animated then you'll need to add the drawing as a callback function. This is because the canvas is cleared and redrawn at the start of every animation frame.null
callback
If you have custom drawing to do and the StarBurst is animated then you'll need to add the drawing as a callback function. This is because the canvas is cleared and redrawn at the start of every animation frame.
Default: null

Animation properties

PropertyDescriptionDefault
animationStepThis can be used to control the "step" (of the angle) that is used from one frame of the animation to the next. Bigger values produce a quicker animation and if it's increased enough the animation will appear to go backwards. If this is the desired effect though you should instead just use a negative value. To disable the animation you can set this property to 0.0.0005
animationStep
This can be used to control the "step" (of the angle) that is used from one frame of the animation to the next. Bigger values produce a quicker animation and if it's increased enough the animation will appear to go backwards. If this is the desired effect though you should instead just use a negative value. To disable the animation you can set this property to 0.
Default: 0.0005

Radius increment properties

PropertyDescriptionDefault
radiusMultiplierThis number is gradually increased to one and is multiplied with the radius - so it gives you a growing effect. If this is not required you can set this to 1. 0
radiusIncrementThis allows you to give the value that the radiusMultiplier is increased by each frame. Bigger values will produce a quicker growing effect.0.01
radiusMultiplier
This number is gradually increased to one and is multiplied with the radius - so it gives you a growing effect. If this is not required you can set this to 1.
Default: 0

radiusIncrement
This allows you to give the value that the radiusMultiplier is increased by each frame. Bigger values will produce a quicker growing effect.
Default: 0.01

Image properties

PropertyDescriptionDefault
imageThis can be the location of an image file to draw in the center (by default) of the starburst, for example, /images/logo.png.null
imageHalignThis should be the horizontal alignment of the image. It can be left, center or rightcenter
imageValignThis should be the vertical alignment of the image. It can be bottom, center or topcenter
imageScaleThe scale of the image. Eg set this to 2 and the image will be twice as large.1
imageXThe X coordinate of the image.null
imageYThe Y coordinate of the image.null
imageWThe width of the image.null
imageHThe height of the image.null
imageShadowWhether the image has a shadow.false
imageShadowOffsetxThe X offset of the shadow.3
imageShadowOffsetyThe Y offset of the shadow.3
imageShadowColorThe color of the shadow.#666
imageShadowBlurThe blur value of the shadow.3
image
This can be the location of an image file to draw in the center (by default) of the starburst, for example, /images/logo.png.
Default: null

imageHalign
This should be the horizontal alignment of the image. It can be left, center or right
Default: center

imageValign
This should be the vertical alignment of the image. It can be bottom, center or top
Default: center

imageScale
The scale of the image. Eg set this to 2 and the image will be twice as large.
Default: 1

imageX
The X coordinate of the image.
Default: null

imageY
The Y coordinate of the image.
Default: null

imageW
The width of the image.
Default: null

imageH
The height of the image.
Default: null

imageShadow
Whether the image has a shadow.
Default: false

imageShadowOffsetx
The X offset of the shadow.
Default: 3

imageShadowOffsety
The Y offset of the shadow.
Default: 3

imageShadowColor
The color of the shadow.
Default: #666

imageShadowBlur
The blur value of the shadow.
Default: 3

Demo pages showing the StarBurst

These demo pages make use of the StarBurst effect: