Question

我一起弗兰克林的数字键盘需要在fillStyle事件中对原始0.1不透明度mouseup进行淡出，但我在找出问题时遇到问题设计方式。 mousedown事件将fillStyle设置为0.5。我想知道是否有人有任何想法。我认为fadeout需要在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

创建一个独立的动画循环，当您希望其中一个按钮淡出回原始按钮时，该循环会逐步更改目标按钮的不透明度。

示例代码和演示：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

需要使用html5画布淡出按钮鼠标事件

1 个答案: