使用 HTML5 画布进行动画图像过渡

Question

试图围绕 HTML5 画布，我想我应该创建一个图像轮播，其中图像将通过不透明度渐变扫描进行更改，即与我的小提琴中的内容相同，只是使用画布。我设法想出了这个小提琴，但我根本不明白发生了什么，或者更确切地说，为什么什么都没有。

这是代码：

var outputCanvas = document.getElementById('output'),
    ctx = outputCanvas.getContext('2d'),
    eWidth = 50,
    speed = 5,
    cWidth = 480,
    img = document.getElementById('newimg'),
    x = 0, y = 0,
    reqAnimFrame = window.mozRequestAnimationFrame    ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame     ||
        window.oRequestAnimationFrame;

ctx.drawImage(img, 0, 0, img.width, img.height);
ctx.globalCompositeOperation = "destination-out";

function draw() {
    console.log(x);
    gradient = ctx.createLinearGradient(x, 0, x+eWidth, 0);
    gradient.addColorStop(0, "rgba(255, 255, 255, 0)");
    gradient.addColorStop(1, "rgba(255, 255, 255, 1)");
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, img.width, img.height);
}

function animate() {
    if (x < 480) {
        x += Math.floor((cWidth / 1000) * speed);
        console.log(x);
        draw();
        reqAnimFrame(animate);
    }
}

reqAnimFrame(animate);

单独调用该draw函数似乎可以工作，但是一旦我开始使用它来触发它，RequestAnimationFrame它就会停止工作。渐变绘制一次，但即使x在动画循环中更新，渐变也保持不变。

我想我只是不明白画布和RequestAnimationFrame工作原理。

请注意，我并不是在寻找执行相同操作的脚本或库，而是希望真正了解画布的工作原理，特别是为什么我的脚本不能。

Answer 1

以下是使用画布合成在两个图像之间进行擦除过渡的一种方法：

原始图像（之前和之后）：

图像之间渐变擦除过渡期间的画布：

• 创建 eWidth 像素宽的透明到不透明渐变。

• 清除画布

• 绘制渐变

• 用不透明填充渐变右侧的所有像素

• 通过合成绘制第一张图像source-in。这将仅在渐变具有不透明像素的情况下显示第一张图像。

• 使用“destination-over”合成绘制第二张图像。这将在现有的第一张图像的“下方”显示第二张图像。

这是示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var cw,ch;
var x=0;
var eWidth=100;

var img1=new Image();
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/sailboat.png";
function start(){

  cw=canvas.width=img.width;
  ch=canvas.height=img.height;

  img1.onload=function(){
    requestAnimationFrame(animate);
  };
  img1.src="https://dl.dropboxusercontent.com/u/139992952/multple/sailboat1.png";

}


function draw() {

  // create gradient
  gradient = ctx.createLinearGradient(x-eWidth,0, x,0);
  gradient.addColorStop(0, "rgba(0,0,0, 0)");
  gradient.addColorStop(1, "rgba(0,0,0, 1)");

  // save the unaltered canvas context
  ctx.save();

  // clear the canvas
  ctx.clearRect(0,0,cw,ch);

  // gradient zone
  ctx.fillStyle = gradient;
  ctx.fillRect(x-eWidth,0,eWidth,ch);

  // fully original right of x
  ctx.fillStyle='black';
  ctx.fillRect(x,0,cw,ch);

  // original image with gradient "dissolve" on left

  // set compositing to source-in
  ctx.globalCompositeOperation='source-in';
  ctx.drawImage(img,0,0);

  // revealed image 
  ctx.globalCompositeOperation='destination-over';
  ctx.drawImage(img1,0,0);

  // restore the context to its unaltered state
  ctx.restore();
}


function animate() {
  if (x<cw+eWidth){ requestAnimationFrame(animate); }
  x+=5;
  draw();
}

$('#again').click(function(){
  x=0;
  requestAnimationFrame(animate);    
});

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Wipe transition between images using canvas</h4>
<button id=again>Again</button><br><br>
<canvas id="canvas" width=300 height=300></canvas>