JavaScript Gradient Roundrects

March 23, 2006 in JavaScript, Libraries, Projects | Comments

JavaScript Gradient Roundrects adds gradient roundrects to an HTML page, without images. It uses the WHATWG canvas tag if it’s available. Otherwise it uses a stack of divs, whose heights are adaptively chosen according to the height of the graded element, the color components, and the radius curvature. There’s a demo here.

I also wrote a JavaScript CSS parser that lets you attach gradients to an element without writing code. You do this by including CSS inside a div tag whose class is ‘style’. View the source of the demo page for an example.

Viewing 5 Comments

    • ^
    • v
    hi love your code and stuff but is it possible t print the gradient horizontally left to right.....very much appreciated your code and effort u put in it.....

    thanks
    aqeel ahmed
    • ^
    • v
    I just ran across your gradient and rounded corners implementation and it looks really good. To be honest, I have not looked through the JavaScript intently yet, but I am wondering if there is not a fairly easy way to make the gradient a horizontal gradient as opposed to the current vertical gradient?
    • ^
    • v
    useful tool thanks.

    altering the createCanvasGradient function as follows will allow you to pass a 'direction' parm via the enhanced style.
    possible values are:: 'horizontal', 'vertical', 'diagonal-down', 'diagonal-up'

    OSGradient.prototype.createCanvasGradient = function(e, width, height) {

    var canvas = document.createElement('canvas');
    var ctx;
    // Return null if canvas isn't supported. The caller will
    // fall back on divs.
    try {ctx = canvas.getContext('2d')} catch (e) {return null}

    // Safari requires the following prior to rendering
    e.appendChild(canvas);
    if (navigator.appVersion.match(/Konqueror|Safari|KHTML/))
    canvas.style.position = 'fixed';
    canvas.setAttribute('width', width);
    canvas.setAttribute('height', height);

    var style = this.style;
    var c0 = style['gradient-start-color'];
    var c1 = style['gradient-end-color'];
    var r = style['border-radius'];
    var direction = style['direction'];

    ctx.beginPath();
    ctx.moveTo(0,r);
    //arcTo() produces NS_ERROR_NOT_IMPLEMENT in Firefox 1.5; use arc() instead:
    //ctx.arcTo(0,0,r,0,r);
    ctx.arc(r,r,r,Math.PI,-Math.PI/2,false);
    ctx.lineTo(width-r,0);
    //ctx.arcTo(width,0,width,r,r);
    ctx.arc(width-r,r,r,-Math.PI/2,0,false);
    ctx.lineTo(width,height-r);
    //ctx.arcTo(width,height,width-r,height,r);
    ctx.arc(width-r,height-r,r,0,Math.PI/2,false);
    ctx.lineTo(r,height);
    //ctx.arcTo(0,height,0,height-r,r);
    ctx.arc(r,height-r,r,Math.PI/2,Math.PI,false);
    ctx.clip();

    switch (direction){
    case "vertical":
    var g = ctx.fillStyle = ctx.createLinearGradient(0,0,0,height);
    break;
    case "horizontal":
    var g = ctx.fillStyle = ctx.createLinearGradient(0,0,width,0);
    break;
    case "diagonal-down":
    var g = ctx.fillStyle = ctx.createLinearGradient(0,0,width,height);
    break;
    case "diagonal-up":
    var g = ctx.fillStyle = ctx.createLinearGradient(0,height,width,0);
    break;
    default: //maintain backwards compatibility with code not passing direction parm
    var g = ctx.fillStyle = ctx.createLinearGradient(0,0,0,height);
    break;

    }

    g.addColorStop(0, OSUtils.color.long2css(c0));
    g.addColorStop(1, OSUtils.color.long2css(c1));
    ctx.rect(0,0,width,height);
    ctx.fill();

    return canvas;
    };


    Cheers
    • ^
    • v
    Hello,

    I'm quite aware that CSS styles are preferably used with DEV elements, but I wanted to use roundrects in html table. Unfortunately the result is wrong, the roundrect is positionned in absolute coordinates 0,0, both in firefox and safari on mac. You can see my test page and the corresponding screen dumps here :

    http://membres.lycos.fr/jfbouzereau/gradient.html

    Thanks in advance for any ideas ...

    Cheers.
    • ^
    • v
    is there way where i can add border
 

Trackbacks

(Trackback URL)

close Reblog this comment
Powered by Disqus · Learn more
blog comments powered by Disqus