Changer la couleur de dégradé sur la toile HTML5 mouseover

Question

J'essaie de changer la couleur de la toile (gradient) au passage de la souris.

Maintenant, j'ai ce code - http://jsfiddle.net/juodikis/p7htB/4/

Comment puis-je faire?

Answer 1

Vous pouvez simplement paramétrer votre fonction de dessin, puis ajouter les événements mouseover/mouseout à votre toile pour appeler la fonction draw avec différents paramètres.

canvas.addEventListener ("mouseover", function() { tirage au sort ("# FF0000", "# 00FF00", "# 0000ff"); });

canvas.addEventListener ("mouseout", function() { tirage au sort ("# 474747", "# 6a6a6a", "# b9b9b9"); });

où

var tirage = function (color1, couleur2, ombre) {

[...]

var lingrd = context.createLinearGradient(0, 0, 0, 195); 
    lingrd.addColorStop(1, color1); 
    lingrd.addColorStop(0, color2); 
    context.fillStyle = lingrd; 
    context.shadowColor = shadow; 

[...]

}

Vous pouvez voir ce travail dans ce fiddle