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

【问题标题】：Change gradient color on HTML5 canvas mouseover在 HTML5 画布鼠标悬停上更改渐变颜色
【发布时间】：2012-08-25 16:42:22
【问题描述】：

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

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

我该怎么做？

【问题讨论】：

标签： html canvas html5-canvas gradient

【解决方案1】：

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

canvas.addEventListener("mouseover", function() { 画（“#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 看到这个工作

【讨论】：

分离块应该如何处理？例如，我将鼠标移到第一个上，只有第一个改变颜色。有可能吗？
为此，您需要一种鼠标检测机制。这是一个需要解决的更复杂的问题。如果您需要这种功能，您可能会通过使用某种画布框架做得更好。您可以找到关于一些现有here 的讨论