如何在要在画布内绘制的图像上生成脉动效果？

Question

    var testPhoto = new Image();
    testPhoto.src = "http://plan9.bell-labs.com/plan9/img/9logo.jpg"
    testPhoto.className = "pulse";

然后：

    topSlice.drawImage(testPhoto, 100, 200, 40, 40);

在绘制图像后，看起来脉动效果不起作用，我应该如何解决这个问题？ I'm following this tutorial for the pulsating effect.

Answer 1

您可以使用Window.requestAnimationFrame代替混合模式/ alpha混合：

＆＃13;

＆＃13;

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    image = new Image();


image.src = "http://plan9.bell-labs.com/plan9/img/9logo.jpg";

function update(timestamp) {
  
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.globalAlpha = Math.sin(timestamp/100) * 0.5 + 0.5;
  context.drawImage(image, 0, 0);
  
  window.requestAnimationFrame(update);
}

window.requestAnimationFrame(update);

＆＃13;

<canvas id="canvas"></canvas>

＆＃13;

＆＃13;

＆＃13;