Question

如果将鼠标悬停在网格上，方块将变为红色。现在我想让它们在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>

感谢您提供任何反馈！

Answer 1

要使你的方形淡出，你可以使用一个间隔来定期重新绘制具有较低和较低不透明度的矩形。
对于每个矩形，您必须存储一些数据：x，y，颜色，淡出开始时的时间，然后是间隔（这样您就可以清除它以避免应用变得越来越慢）。
我打赌你会通过阅读代码来理解这一切，但请不要犹豫。

（jsbin在这里：http://jsbin.com/gufikuwutu/1/edit 或下面的代码片段：）

＆＃13;

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();
}

＆＃13;

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

＆＃13;

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

＆＃13;

画布恢复颜色

1 个答案: