更改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

回答

相關問題