HTML5 캔버스에서 마우스 오버시 그라디언트 색상 변경

Question

마우스 오버시 캔버스 색상 (그라디언트)을 변경하려고합니다.

지금이 코드가 - http://jsfiddle.net/juodikis/p7htB/4/

내가 어떻게 할 수 있습니까?

Answer 1

그리기 기능을 매개 변수화 한 다음 mouseover/mouseout 이벤트를 캔버스에 추가하여 다른 매개 변수로 그리기 기능을 호출 할 수 있습니다.

canvas.addEventListener ("마우스 오버"함수() { 연신 ("# FF0000의", "# 00FF00의", "#의 0000FF"); });

canvas.addEventListener ("마우스 아웃"함수() { 연신 ("# 474747", "# 6a6a6a의", "#의 b9b9b9"); })

여기서

VAR 그리는 = 함수 (COLOR1, COLOR2 그림자) {

[...]

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

,363,210

[...]

}

당신이이 fiddle