画布恢复颜色

Canvas Restore color

本文关键字：颜色 恢复 布恢复      更新时间：2023-09-26

如果将鼠标悬停在网格上，方块将变为红色。现在我想让它们在 1 秒后使用淡出效果变回原始颜色（黑色）。有人可以帮忙吗？

我已经尝试了类似于ctx.restore的东西，但我想我没有正确实现它，因为它什么也没做。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
		overflow:hidden;
      }
	  
	  #wrap {
		width: 600px;
		height: 600px;
	  }
    </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>

感谢您的任何和所有反馈！

若要使正方形淡出，可以使用一个间隔，该间隔将定期以越来越低的不透明度重新绘制矩形。
对于每个矩形，您必须存储一些数据：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>

相关文章：