캔버스 색 복원

그리드 위에 마우스를 올려 놓으면 사각형이 빨갛게 변합니다. 이제는 페이드 아웃 효과를 사용하여 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

예! 고마워요! "붉은 색"도 무작위로 배정하는 법을 알게됩니까? 빨간색 대신 빨강, 파랑, 녹색 등 임의의 색상을 얻습니다. –

사각형이 희미 해 지도록하려면 불투명도가 낮고 낮아서 규칙적으로 사각형을 다시 그리는 간격을 사용하십시오.
각 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>

출처

2014-12-23 14:35:12 GameAlchemist

캔버스 색 복원

답변

관련 문제