在HTML5画布鼠标悬停上更改渐变颜色

Question

我正在尝试在鼠标悬停时更改画布颜色（渐变）。

现在我有了这段代码 - http://jsfiddle.net/juodikis/p7htB/4/

我该怎么做？

Answer 1

您可以参数化绘图功能，然后将鼠标悬停/鼠标移动事件添加到画布，以使用不同的参数调用绘图函数。

  

canvas.addEventListener（“mouseover”，function（）{       draw（“＃ff0000”，“＃00ff00”，“＃0000ff”）;   }）;

     

canvas.addEventListener（“mouseout”，function（）{       画（“＃474747”，“＃6a6a6a”，“＃b9b9b9”）;   }）;

，其中

  

var draw = function（color1，color2，shadow）{

     

[...]

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

     

[...]

     

}

您可以在此fiddle

中看到这一点