使用worker线程实现惊艳的图片水纹特效

water effect with canvas and worker, 使用h5 canvas（画布）和worker（工作线程）实现的高性能图片渲染特效。可用鼠标交互。

h5, canvas, water, 图像特效

《使用js把svg图形转成png图像》申请公开！

第三方库
作品简介 13067
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/*
 * Adapted from Neil Wallis' Water Java simulation
 * http://www.neilwallis.com/projects/java/water/index.php
 *
 */
"use strict";
///////////////// worker thread code ///////////////////
const water = noWorkers => {
    "use strict";
    let canvas, ctx;
    let pointer = {
        x: 0,
        y: 0,
        isDown: false
    };
    let width, height, hwidth, hheight, size, map, oldind, newind;
    let textureBuffer8, textureBuffer32;
    let ripple, rippleBuffer8, rippleBuffer32;
    const window = {
        CP: {
            shouldStopExecution(e) {},
                exitedLoop(e) {}
        }
    };
    // ---- messages from the main thread ----
    const message = e => {
        switch (e.data.msg) {
            case "pointerMove":
                pointer.x = e.data.x | 0;
                pointer.y = e.data.y | 0;
                break;
            case "pointerDown":
                pointer.x = e.data.x | 0;
                pointer.y = e.data.y | 0;
                pointer.isDown = true;
                break;
            case "pointerUp":
                pointer.isDown = false;
                break;
            case "start":
                canvas = e.data.elem;
                width = canvas.width;
                height = canvas.height;
                ctx = canvas.getContext("2d");
                hwidth = width / 2;
                hheight = height / 2;
                size = width * (height + 2) * 2;
                map = new Int16Array(size);
                oldind = width;
                newind = width * (height + 3);
                const textureBuffer = new ArrayBuffer(e.data.imgData.data.length);
                textureBuffer8 = new Uint8ClampedArray(textureBuffer); // 8 bit clamped view
                textureBuffer32 = new Uint32Array(textureBuffer); // 32 bits view
                textureBuffer8.set(e.data.imgData.data);
                // ripple texture
                ripple = e.data.imgData;
                const rippleBuffer = new ArrayBuffer(ripple.data.length);
                rippleBuffer8 = new Uint8ClampedArray(rippleBuffer);
                rippleBuffer32 = new Uint32Array(rippleBuffer);
                // start
                run();
                gloop();
                setInterval(gloop, 4000);
                break;
        }
    };
    // create wave
    function wave(dx, dy, r) {
        for (let j = -r; j < r; j++) {
            for (let k = -r; k < r; k++) {
                if (j * j + k * k < r * r) {
                    const x = dx + k;
                    const y = dy + j;
                    if (y > 0 && y < height && x > 0 && x < width) {
                        map[oldind + y * width + x] += 256;
                    }
                }
            }
        }
    }

function water() {
        // toggle maps each frame
        let i = oldind;
        oldind = newind;
        newind = i;
        let mapind = oldind;
        const len = width * height;
        for (let i = 0; i < len; i++) {
            const x = (i % width) | 0;
            const y = (i / width) | 0;
            let data =
                ((map[mapind - width] +
                        map[mapind + width] +
                        map[mapind - 1] +
                        map[mapind + 1]) >>
                    1) -
                map[newind + i];
            data -= data >> 6;
            mapind++;
            if (x !== 0) map[newind + i] = data;
            data = 1024 - data;
            // offsets
            let a = ((x - hwidth) * data / 1024 + hwidth) | 0;
            let b = ((y - hheight) * data / 1024 + hheight) | 0;
            // 32 bits pixel copy
            rippleBuffer32[i] = textureBuffer32[a + b * width];
        }
        ripple.data.set(rippleBuffer8);
        ctx.putImageData(ripple, 0, 0);
    }

编译

CSS

HTML

water effect with canvas and worker, 使用h5 canvas（画布）和worker（工作线程）实现的高性能图片渲染特效。可用鼠标交互。

h5, canvas, water, 图像特效

编辑器支持Emmet

快捷键

water effect with canvas and worker, 使用h5 canvas（画布）和worker（工作线程）实现的高性能图片渲染特效。可用鼠标交互。

h5, canvas, water, 图像特效

使用CSS3 transform 3d实现的三维轨道图片分割动画特效

使用svg filter和canvas实现的图像碎片化特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：