畫布恢復顏色

如果將鼠標懸停在網格上，正方形將變爲紅色。現在我想讓他們在1秒後使用淡出效果改回原來的顏色（黑色）。有人可以幫忙嗎？畫布恢復顏色

我已經嘗試了一些沿着ctx.restore的行，但我想我沒有正確實現它，因爲它什麼也沒做。

<!DOCTYPE HTML> 
 
<html> 
 
    <head> 
 
    <style> 
 
     body { 
 
     margin: 0px; 
 
     padding: 0px; 
 
\t \t overflow:hidden; 
 
     } 
 
\t 
 
\t #wrap { 
 
\t \t width: 600px; 
 
\t \t height: 600px; 
 
\t } 
 
    </style> 
 
    </head> 
 
    <body bgcolor="#252525"> 
 
    <div class="wrap"><canvas id="canvas" width="5000" height="3000"></canvas></div> 
 
    <script> 
 
     var ctx = canvas.getContext("2d"), 
 
    cw = 32, 
 
    ch = 32, 
 
    w = canvas.width, 
 
    h = canvas.height; 
 

 
ctx.translate(0.5, 0.5); 
 
ctx.beginPath(); 
 

 
for(var y = 0; y < h; y += ch) { 
 
for(var x = 0; x < w; x += cw) { 
 
     ctx.rect(x, y, cw-2, ch-2); // give 1px space 
 
    } 
 
} 
 

 
ctx.fillStyle = "black"; 
 
ctx.strokeStyle = "#000"; 
 

 
ctx.lineWidth=1; 
 
ctx.fill(); 
 
ctx.stroke(); 
 

 
canvas.onmousemove = function(e) { 
 

 
    var rect = this.getBoundingClientRect(), 
 
     x = e.clientX - rect.left, 
 
     y = e.clientY - rect.top, 
 
     cx = ((x/cw)|0) * cw, 
 
     cy = ((y/ch)|0) * ch; 
 
    
 
    ctx.fillStyle = "red"; 
 
    ctx.fillRect(cx+1, cy+1, cw-3, ch-3); 
 
}; 
 
    </script> 
 
    </body> 
 
</html>

謝謝你的任何和所有的反饋！

來源

2014-12-23 Bogdan Lazar

您可以在您的fillRect使用超時https://developer.mozilla.org/en-US/ docs/Web/API/WindowTimers.setTimeout恢復爲舊顏色。 –

這樣的事情？ http://jsbin.com/poqezohisi/1/edit?js,output – GameAlchemist

是的！非常感謝！你會碰巧知道如何隨機化「紅」色嗎？像獲得隨機顏色，紅色，藍色，綠色等，而不是隻有紅色。 –

爲了讓你的方格淡出，你可以使用一個間隔，它會定期用較低和較低的不透明度重新繪製矩形。
對於每個矩形，您必須存儲一些數據：x，y，顏色，開始淡出的時間，然後是間隔（以便您可以清除它以避免應用程序變得越來越慢）。
我敢打賭，你會通過閱讀代碼來理解這一切，但不要猶豫，問。

（jsbin這裏：下面http://jsbin.com/gufikuwutu/1/edit 或代碼片段：）

var ctx = canvas.getContext("2d"), 
 
    cw = 32, 
 
    ch = 32, 
 
    w = canvas.width, 
 
    h = canvas.height; 
 

 
ctx.translate(0.5, 0.5); 
 
ctx.beginPath(); 
 

 
for (var y = 0; y < h; y += ch) { 
 
    for (var x = 0; x < w; x += cw) { 
 
    ctx.rect(x, y, cw - 2, ch - 2); // give 1px space 
 
    } 
 
} 
 

 
ctx.fillStyle = "black"; 
 
ctx.strokeStyle = "#000"; 
 

 
ctx.lineWidth = 1; 
 
ctx.fill(); 
 
ctx.stroke(); 
 

 
var lastRect = null; 
 

 
canvas.onmousemove = function(e) { 
 
    var rect = this.getBoundingClientRect(), 
 
    x = e.clientX - rect.left, 
 
    y = e.clientY - rect.top, 
 
    cx = ((x/cw) | 0) * cw, 
 
    cy = ((y/ch) | 0) * ch; 
 

 
    // ignore this rect if we allready drawn it. 
 
    if (lastRect && lastRect.cx == cx && lastRect.cy == cy) return; 
 
    // pickup random color 
 
    var randomHue = Math.floor(Math.random() * 360); 
 
    var randomColor = 'hsl(' + randomHue + ', 85%, 60%)'; 
 
    ctx.fillStyle = randomColor; 
 
    ctx.fillRect(cx + 1, cy + 1, cw - 3, ch - 3); 
 
    // setup rect data 
 
    var rectInfo = { 
 
    cx: cx, 
 
    cy: cy, 
 
    t: Date.now(), 
 
    color: randomColor, 
 
    interval: 0 
 
    }; 
 
    // setup interval 
 
    rectInfo.interval = setInterval(fadeOutRect.bind(null, rectInfo), 30); 
 
    lastRect = rectInfo; 
 
}; 
 

 
function fadeOutRect(rectInfo) { 
 
    var now = Date.now(); 
 
    var elapsed = now - rectInfo.t; 
 
    var max = 1800; 
 
    // clear the rect. 
 
    ctx.fillStyle = "#000"; 
 
    ctx.fillRect(rectInfo.cx + 1, rectInfo.cy + 1, cw - 3, ch - 3); 
 
    // exit if too much time elapsed. 
 
    if (elapsed > max) { 
 
    clearInterval(rectInfo.interval); 
 
    return; 
 
    } 
 
    // draw the rect with an opacity proportionnal to time elapsed. 
 
    ctx.save(); 
 
    ctx.globalAlpha = 1 - elapsed/max; 
 
    ctx.fillStyle = rectInfo.color; 
 
    ctx.fillRect(rectInfo.cx + 1, rectInfo.cy + 1, cw - 3, ch - 3); 
 
    ctx.restore(); 
 
}

 body { 
 
     margin: 0px; 
 
     padding: 0px; 
 
     overflow: hidden; 
 
     } 
 
     #wrap { 
 
     width: 600px; 
 
     height: 600px; 
 
     }

<div class="wrap"> 
 
    <canvas id="canvas" width="5000" height="3000"></canvas> 
 
</div>

來源

2014-12-23 14:35:12 GameAlchemist

畫布恢復顏色

回答

相關問題