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

Question

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

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

我该怎么做？

Answer 1

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

canvas.addEventListener("mouseover", function() { draw("#ff0000", "#00ff00", "#0000ff"); });

canvas.addEventListener("mouseout", function() { draw("#474747", "#6a6a6a", "#b9b9b9"); });​</p>

在哪里

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; 

[...]

}

你可以在这个小提琴中看到这个工作