html5换场效果图,场景转场动画的Canvas实现

废话不说，先上图

图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

下一页