废话不说，先上图

图1：转场前

图2：转场中（动画效果此处请看末尾链接）

图3：转场后

看完效果，我们来讲讲原理。

首先我们需要准备一张转场用的图。理论上所有图片都可以作为过渡图使用。

我使用的是一张带有天使翅膀图案的图片作为过渡图。

首先，将过渡图黑白化。

var pixs = context.getImageData(0, 0, context.Canvas.width, context.Canvas.height); var data = pixs.data; var len = data.length; while(len -= 4){ var r = (data[len] + data[len + 1] + data[len + 2]) / 3; data[len] = data[len + 1] = data[len + 2] = r; } context.putImageData(pixs, 0, 0);

(以上代码纯手写未测试，请注意)

在进行过渡之前，我们必须往屏幕上绘制一些内容，随便画什么都可以。

然后我们开始准备过渡了。

在过渡之前，我们需要定义一些变量。

// 用于保存旧的场景最后一帧 var oldSceneCanvas = document.createElement("Canvas"); // 用于指示当前最多可用的不透明度值 var currentOffset = 255; // 将过渡图绘制在后台Canvas上，由于之前我们将它黑白化过，因此这里假定已经在Canvas上 var transitionCanvas = ...;

完成上面的操作后，我们将当前可见画布中的内容绘制在 oldSceneCanvas 上。

然后假装正常的把新内容绘制在可见画布上。

之后我们将 oldSceneCanvas 的每个像素和 currentOffset进行比较，如果alpha通道大于currentOffset，则让其等于 currentOffset的值。

将oldSceneCanvas 最后绘制在可见画布上。

1 2 下一页