帆布还原颜色
帆布还原颜色
提问于 2014-12-23 13:46:14
如果你把鼠标悬停在网格上，方块就会变红。现在，我想让他们回到原来的颜色(黑色)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>
感谢您的所有反馈！
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-12-23 14:35:12
为了让你的正方形淡出，你可以用一个间隔来定期地用低不透明度重新绘制正方形。
对于每一个rect，您必须存储一些数据: 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27621647
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号