Share RGraph:
Share RGraph on Twitter Share RGraph on Google Plus Share RGraph on Facebook Follow RGraph on LinkedIn


An example of the HTML5 canvas rotate function

by Richard Heyes, RGraph author

This page shows how to use the RGraph.rotateCanvas() method to create a spinning effect.


[No canvas support]

Introduction

This is an example of the HTML5 canvas rotate() function being used to rotate the canvas before the chart is drawn The angle is controlled by the range input (best viewed in Chrome, Safari or Opera) below the canvas - and the canvas is being continually refreshed. Hence the spinning effect.

Rotating the canvas

The default rotate() function simply rotates the canvas around the [0,0] coordinates. The angle is measured in RADIANS - not degrees - which is important to remember or you can get some unexpected results. To convert from degrees to radians you can use the RGraph function:



RGraph.degrees2Radians(degrees);

Or you could use these functions instead:

<script>
    Number.prototype.toRadians = function ()
    {
        return this * (Math.PI / 180);
    }
    
    Number.prototype.toDegrees = function ()
    {
        return this * (180 / Math.PI);
    }
</script>

It's important to remember that the rotation is always centered about the [0,0] coordinates. This is where the RGraph.rotateCanvas() differs as you can pass in the coordinates that you want the canvas to be rotated about. This results in the RotateCanvas function translating to those coordinates, rotating the canvas and then translating back. like this:

RGraph.rotateCanvas(canvas, x, y, radians);

So this means that if you wanted to rotate the canvas about its center you do this:

var x = canvas.width / 2;
var y = canvas.height / 2;

RGraph.rotateCanvas(canvas, x, y, radians);

In the example above the canvas is continuously rotated every 50ms and the angle is increased or decreased by the range input.

Example code

The code to achieve the spinning effect is this:

<input type="range" min="-180" max="180" value="0" onchange="gAngle = Number(this.value);" style="width: 250px" />

<script>
    gAngle  = 0;
    gCanvas = document.getElementById("cvs");
    
    function DrawChart ()
    {
        // Instead of using the Clear method, this clears the canvas and resets the rotation
        gCanvas.width = gCanvas.width;

        // This resets the antialiasing fix - so when the chart is drawn again the canvas can be "fixed" again
        gCanvas.__rgraph_aa_translated__ = false;

        RGraph.rotateCanvas(gCanvas, 175, 175, RGraph.degrees2Radians(gAngle));

        var rose = new RGraph.Rose('cvs', [4,3,8,6,5,9,6,4])
            .set('colors.sequential', true)
            .set('colors.alpha', 0.5)
            .set('margin', 5)
            .set('labels.axes', 'n')
            .draw();
        
        setTimeout(DrawChart, 50);
    }
    
    DrawChart();
</script>

Share this page:

 
Tweet
 

© Copyright 2014 Richard Heyes All rights reserved.