CODEWITHSUNDEEP
javascriptjqueryhtml5-canvas
dg85
dg85

Reputation: 490

jquery knob, animate and increment alpha

I'm using jquery knob with .animate as a percentage gauge which is working great however i'd like to set the opacity of the knob's canvas strokestyle to an alpha value as in: 0% = 0.1, 100% = 1 and have this increment with the animation so the stroke would start alpha 0 and end (in my example) at 0.7

I only have a cursory understanding of canvas but reviewing the knob class, I've found that the strokestyle is set on ln 636:

c.strokeStyle = r ? this.o.fgColor : this.fgColor ;

I understand I can set this to an rgba value which i've tested and works, how could I increment the alpha value as described or is there a better solution?

jsfiddle

Upvotes: 2

Views: 961

Answers (2)

Vlad Magdalin
Vlad Magdalin

Reputation: 1690

You could use a library like pusher.color to grab the color and change it's alpha in the draw() function or the draw hook:

var color = pusher.color(current_color);
color.alpha(angle / 100);

You can now extract the modified color via:

color.html()

Here's an updated fiddle with (I think) the desired behavior: http://jsfiddle.net/bG478/2/

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191769

Does using rgba not work for you?

var myColor = 'rgba(41,100,159,.5)';

http://jsfiddle.net/ExplosionPIlls/bG478/1/

Upvotes: 0

Related Questions