Canvas 隧道动画和动画缓存的应用

Crazy face tunnel effect with cached animation. 刚开始动画较缓慢，后面通过缓存，提高渲染性能。

canvas，缓存

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1554
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var texture = new Image(),
    textureData = [],
    tunnelData = [],
    preCalcTunnelData = [],
    width = 256,
    height = 256,
    ctx = document.getCSSCanvasContext('2d', 'animation', width, height),
    textureCanvas = document.createElement('canvas'),
    tCtx = textureCanvas.getContext('2d'),
    texHeight = 512,
    texWidth = 512,
    distTable = [],
    angleTable = [],
    timeShift = 0,
    animFrame = 0;

textureCanvas.width = texWidth;
textureCanvas.height = texHeight;

function preCalc() {
    var angle = 0,
        distance = 0,
        ratio = 32;

tCtx.drawImage(texture, 0, 0);
    textureData = tCtx.getImageData(0, 0, texWidth, texHeight);
    tunnelData = ctx.createImageData(width, height);

for (var x = 0; x < width; x++) {
        for (var y = 0; y < height; y++) {
            distance = Math.floor(ratio * texHeight / Math.sqrt((x - width / 2) * (x - width / 2) + (y - height / 2) * (y - height / 2))) % texHeight;
            angle = Math.floor(0.5 * texWidth * Math.atan2(y - height / 2, x - width / 2) / Math.PI);

distTable[y * width + x] = distance;
            angleTable[y * height + x] = angle;
        }
    }

preCalcAnimation();
}

function preCalcAnimation() {
    var shiftX = timeShift,
        shiftY = texWidth + timeShift;

for (var x = 0; x < width; x++) {
        for (var y = 0; y < height; y++) {
            var i = (((angleTable[y * width + x] + shiftY) % texHeight) * texWidth + ((distTable[y * width + x] + shiftX) % texWidth)) * 4,
                t = (y * width + x) * 4;

tunnelData.data[t + 0] = textureData.data[i + 0];
            tunnelData.data[t + 1] = textureData.data[i + 1];
            tunnelData.data[t + 2] = textureData.data[i + 2];
            tunnelData.data[t + 3] = 255;
        }

}

ctx.putImageData(tunnelData, 0, 0);
    timeShift += 4;
    if (timeShift < 512) {
        preCalcTunnelData.push(ctx.getImageData(0, 0, width, height));
        requestAnimationFrame(preCalcAnimation);
    } else {
        animate();
    }
};

function animate() {
    animFrame++;

if (animFrame >= preCalcTunnelData.length) {
        animFrame = 0;
    }

ctx.putImageData(preCalcTunnelData[animFrame], 0, 0);
    requestAnimationFrame(animate);
}

texture.crossOrigin = 'Anonymous';
texture.src = 'http://i.imgur.com/CDNfRQX.png';

texture.onload = function() {
    preCalc()
}

编译

CSS

HTML

Crazy face tunnel effect with cached animation. 刚开始动画较缓慢，后面通过缓存，提高渲染性能。

canvas，缓存

编辑器支持Emmet

快捷键

Crazy face tunnel effect with cached animation. 刚开始动画较缓慢，后面通过缓存，提高渲染性能。

canvas，缓存

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：