html - HTML5 キャンバスのマウスオーバーでグラデーション カラーを変更する

Question

マウスオーバーでキャンバスの色 (グラデーション) を変更しようとしています。

今、私はこのコードを持っています - http://jsfiddle.net/juodikis/p7htB/4/

どうすればいいですか？

Answer 1

描画関数をパラメーター化してから、mouseover/mouseout イベントをキャンバスに追加して、さまざまなパラメーターで描画関数を呼び出すことができます。

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; 

[...]

}

このフィドルでこれが機能しているのを見ることができます