Sign in to follow this  
fengFanYong

How to draw gradient color

Recommended Posts

I am doing it by canvas, may be there is a better solution

    var canvas = document.createElement('canvas');
    canvas.width  = 200;
    canvas.height = 60;
    var ctx = canvas.getContext('2d');
    var gradient = ctx.createLinearGradient(0, 0, 0, 50);
    gradient.addColorStop(0, "#D3872A");
    gradient.addColorStop(1, "#CFB732");
    ctx.fillStyle = gradient;
    var sprite = new PIXI.Sprite(PIXI.Texture.fromCanvas(canvas));
    sprite.x = 341;
    sprite.y = 5;
    this.addChild(sprite);

 

Share this post


Link to post
Share on other sites
On 2/8/2017 at 4:05 AM, PainKKKiller said:

I am doing it by canvas, may be there is a better solution


    var canvas = document.createElement('canvas');
    canvas.width  = 200;
    canvas.height = 60;
    var ctx = canvas.getContext('2d');
    var gradient = ctx.createLinearGradient(0, 0, 0, 50);
    gradient.addColorStop(0, "#D3872A");
    gradient.addColorStop(1, "#CFB732");
    ctx.fillStyle = gradient;
    var sprite = new PIXI.Sprite(PIXI.Texture.fromCanvas(canvas));
    sprite.x = 341;
    sprite.y = 5;
    this.addChild(sprite);

 

Note to future people looking at this thread, you do have to make a call to ctx.fillRect(). Without the call, nothing will be rendered in the sprite. 

ctx.fillStyle = gradient;
ctx.fillRect(x, y, width, height);

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.