Нужно исчезнуть при нажатии кнопки mouseup с использованием html5 холста

Question

Числовая панель, которую я frankensteined вместе, нуждается в затухании с оригиналом fillStyle непрозрачности 0.1 на мероприятии mouseup, но у меня возникли проблемы с определением способа его проектирования. Событие mousedown устанавливает fillStyle в 0.5. Мне было интересно, есть ли у кого-нибудь идеи. Я полагаю, что затухание необходимо построить после метода context.clearRect(). Я видел примеры создания цикла, но мне не удалось реализовать его в моем коде. Я ценю любую помощь.

canvas.addEventListener('mouseup', function(event) { 
    var x = event.pageX - elemLeft, 
     y = event.pageY - elemTop; 
    elements.forEach(function(element) { 
     if (y > element.top && y < element.top + element.height && x > element.left && x < element.left + element.width) { 
      var topLeftX = element.centX - 47; 
      var topLeftY = element.centY - 47; 
      context.clearRect(topLeftX, topLeftY, 95, 95);    

      //Fade out code here? 

      context.beginPath(); 
      context.font = "bold 48px Arial"; 
      context.fillStyle = 'rgb(255,255,0)'; 
      context.fillText(element.id, element.textX, element.textY); 
      context.arc(element.centX, element.centY, element.rad, 0, 2 * Math.PI, false); 
      context.fillStyle = 'rgba(255,255,255,0.1)'; 
      context.fill(); 
      context.lineWidth = 5; 
      context.strokeStyle = 'rgba(255,255,0,.5)'; 
      context.stroke(); 
     } 
    }); 
}, false); 

JSFiddle

Answer 1

Создать независимый цикл анимации, которая постепенно меняет Непрозрачность целевой кнопки, когда вы хотите одну из кнопок плавной спины к оригиналу.

Пример кода и демо:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
function reOffset(){ 
 
    var BB=canvas.getBoundingClientRect(); 
 
    offsetX=BB.left; 
 
    offsetY=BB.top;   
 
} 
 
var offsetX,offsetY; 
 
reOffset(); 
 
window.onscroll=function(e){ reOffset(); } 
 
window.onresize=function(e){ reOffset(); } 
 

 
ctx.textAlign='center'; 
 
ctx.textBaseline='middle'; 
 
ctx.font='48px arial'; 
 

 
var buttons=[]; 
 
var button5={ 
 
    cx:50, 
 
    cy:50, 
 
    radius:44, 
 
    text:5, 
 
    red:255, 
 
    green:255, 
 
    blue:0, 
 
    alpha:0, 
 
} 
 
buttons.push(button5); 
 

 
var redraw=true; 
 

 
requestAnimationFrame(animate); 
 

 
$("#canvas").mousedown(function(e){handleMouseDown(e);}); 
 

 

 
function animate(time){ 
 
    if(redraw){ 
 
    redraw=false; 
 
    for(var i=0;i<buttons.length;i++){ 
 
     var b=buttons[i]; 
 
     if(b.alpha>0){redraw=true;} 
 
     b.alpha=Math.max(0,b.alpha-0.01); 
 
    } 
 
    drawAll(); 
 
    } 
 
    requestAnimationFrame(animate); 
 
} 
 

 
function drawAll(){ 
 
    ctx.fillStyle='green'; 
 
    ctx.fillRect(0,0,cw,ch); 
 
    for(var i=0;i<buttons.length;i++){ 
 
    drawButton(buttons[i]); 
 
    } 
 
} 
 

 
function drawButton(b){ 
 
    ctx.beginPath(); 
 
    ctx.font = "bold 48px Arial"; 
 
    ctx.fillStyle = 'rgb(255,255,0)'; 
 
    ctx.fillText(b.text,b.cx,b.cy); 
 
    ctx.arc(b.cx,b.cy,b.radius,0,Math.PI*2, false); 
 
    ctx.fillStyle = 'rgba(255,255,255,'+b.alpha+')'; 
 
    ctx.fill(); 
 
    ctx.lineWidth = 5; 
 
    ctx.strokeStyle = 'rgba(255,255,0,'+0.50+')'; 
 
    ctx.stroke(); 
 
} 
 

 
function handleMouseDown(e){ 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    var mx=parseInt(e.clientX-offsetX); 
 
    var my=parseInt(e.clientY-offsetY); 
 

 
    // Put your mousedown stuff here 
 
    for(var i=0;i<buttons.length;i++){ 
 
    var b=buttons[i]; 
 
    var dx=mx-b.cx; 
 
    var dy=my-b.cy; 
 
    if(dx*dx+dy*dy<b.radius*b.radius){ 
 
     b.alpha=0.60; 
 
     redraw=true; 
 
    } 
 
    } 
 

 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Click on the round button</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>