Tuesday, April 19, 2011

BiLinearGradient in HTML5 canvas...

This is just a short one for all HTML5 canvas lovers...
Because it was not a big deal and might be usefull for one or the other i created also a javascript version of the bilinear gradient paint that one could use in HTML5 canvas. To make it possible i added one class that represents a color in the way that one could get the rgba values from a given color and a class that represents the bilinear gradient paint itself.
The result looks like this...


click here to see it live...
To see it live you just have to click the link below the image. Here is a small example on how to use the BiLinearGradient in JavaScript:


function init()
{


 

}

You have to place the above script in your html page <head> tag. If you don't know how to do that just take a look at the page sourcecode of the linked page below the image.


Here are the two files you need to create the bilinear color interpolation.


    RGBAColor.js


    BiLinearGradient.js


Enjoy coding...
Eingestellt von Han Solo um 11:28 AM
Labels: , ,

2 comments:

  1. UnknownAugust 31, 2012 at 4:18 PM

    Hey there, I really like your work on gradients and colors. Any chance this info on HTML5 canvas bilinear gradients is still available? The links above do not seem to work.

    Thanks! - Ben

    ReplyDelete
  2. Han SoloAugust 31, 2012 at 4:58 PM

    Hi Ben,

    Link updated (please let me know if you encounter more of these linking problems because I moved everything to my DropBox instead of using the iDisk).

    Cheers and thx for the hint,

    Gerrit

    ReplyDelete

Subscribe to: Post Comments (Atom)