HTML5 canvas的動畫圖像過渡

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

這是使用“畫布合成”在2張圖像之間進行划像過渡的一種方法：

原始圖像（前后）：

在圖像之間進行漸變擦拭過渡時的畫布：

• 創建一個eWidth像素寬的透明到不透明漸變。

• 清除畫布

• 繪制漸變

• 用不透明填充漸變右側的所有像素

• 使用source-in合成繪制第一個圖像。 這將僅在漸變具有不透明像素的地方顯示第一張圖像。

• 使用“目標上方”合成繪制第二個圖像。 這將在現有第一個圖像“下方”顯示第二個圖像。

這是示例代碼和演示：

 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>