谷歌如何在Google Ideas主页上创建扭曲效果？

Question

Google Ideas homepage网站的特色是一段动画，它扭曲了部分文字的外观，并配有一个带静态音效的按钮，以模拟内容在不同项目之间的过渡时出现的信号干扰。

如果设计发生变化，这里有一个GIF图：

他们是如何实现这一点的？我可以在开发工具中看到类和样式在跳动，因此肯定涉及JavaScript，但我找不到脚本本身的相关部分。

- tommarshall

---

https://productforums.google.com/forum/#!topic/drive/0ojbJMr06ro - Justinas

我猜他们正在使用带有WebGL渲染的画布。在JavaScript中搜索“canvas”。我不太确定具体发生了什么，因为代码稍微有点混淆（或者说是压缩），但可以查看canvas和WebGL API以获取一些想法。 - Octav Zlatior

Answer 1

这并不难，尤其是使用 html2canvas 和 canvas-glitch。

基本上你只需要将DOM元素转换为画布(canvas)，然后操作图像数据即可实现故障效果。而且使用这两个库，这个任务变得非常简单。

html2canvas(node, {
    onrendered: function (canvas) {
        // hide the original node
        node.style.display = "none";
        // add the canvas node to the node's parent
        // practically replacing the original node
        node.parentNode.appendChild(canvas);
        // get the canvas' image data
        var ctx = canvas.getContext('2d');
        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        // glitch it
        var parameters = { amount: 1, seed: Math.round(Math.random()*100), iterations: 5, quality: 30 };
        glitch(imageData, parameters, function(imageData) {
            // update the canvas' image data
            ctx.putImageData(imageData, 0, 0);
        });
    }
});

点击此处查看演示：https://jsfiddle.net/ArtBIT/x12gvs1v/

- ArtBIT