更改HTML5 canvas上的渐变颜色mouseover

我试图在mouseover上更改canvas颜色（渐变）。更改HTML5 canvas上的渐变颜色mouseover

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

我该怎么办呢？

2012-08-30 Lukas J.

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

canvas.addEventListener（ “鼠标悬停”，函数（）{ 拉伸（ “＃FF0000”， “＃00FF00”， “＃0000FF”）; }）;

canvas.addEventListener（ “鼠标移出”，函数（）{ 拉伸（ “＃474747”， “＃6a6a6a”， “＃b9b9b9”）; }）;

其中

变种平局=函数（颜色1，颜色2，阴影）{

[...]

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

[...]

}

你可以看到在这个fiddle

来源

2012-08-30 23:05:21 jbalsas

这个工作，应该如何进行分离块？例如，我将鼠标移到第一个上，只有第一个改变颜色。可能吗？ –

要做到这一点，您需要一个鼠标检测机制。这是一个更复杂的问题。如果你需要这种功能，你可能会更好地使用某种画布框架。你可以找到关于一些现有[这里]的讨论（http://stackoverflow.com/questions/3474608/what-is-the-current-state-of-the-art-in-html-canvas-javascript-库和-FRA） – jbalsas

更改HTML5 canvas上的渐变颜色mouseover

回答

相关问题