页面的head部分，简单设置一下页面样式即可，代码如下：

<style type="text/css">
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
canvas {
    cursor: none;
}
</style>

页面的body部分，仅需要设置一个canvas画布即可，代码如下：

<canvas id="canvas"></canvas>

页面的底部，将整个canvas特效封装成了一个类，代码比较多，这里仅贴出部分代码：

constructor() {
        // setup a canvas
        this.canvas = document.getElementById('canvas');
        this.dpr = DPR;
        this.ctx = this.canvas.getContext('2d');
        this.ctx.scale(this.dpr, this.dpr);
        
        // method binds
        this.render = this.render.bind(this);
        this.handleDrop = this.handleDrop.bind(this);
        this.handleDragOver = this.handleDragOver.bind(this);
        this.handleDragLeave = this.handleDragLeave.bind(this);
        this.handleMouse = this.handleMouse.bind(this);
        this.handleResize = this.handleResize.bind(this);
        this.handleMousedown = this.handleMousedown.bind(this);
        this.handleMouseup = this.handleMouseup.bind(this);
        
        // state
        this.isDragging = false;
        this.hasLoaded = false;
        this.tick = 0;
        this.mouse = {
            x: window.innerWidth * this.dpr / 2,
            y: window.innerHeight * this.dpr / 2,
            mousedown: false,
        };
        
        // setup
        this.setupListeners();
        this.addInitialImage();
        this.setCanvasSize();
        this.render();
    }
    
    setupListeners() {
        window.addEventListener('resize', this.handleResize);
        this.canvas.addEventListener('drop', this.handleDrop, false);
        this.canvas.addEventListener('dragover', this.handleDragOver, false);
        this.canvas.addEventListener('dragleave', this.handleDragLeave, false);
        window.addEventListener('mousemove', this.handleMouse);
        window.addEventListener('mousedown', this.handleMousedown);
        window.addEventListener('mouseup', this.handleMouseup);
    }
    
    handleResize() {
        this.setCanvasSize();
    }
    
    handleMousedown(event) {
        this.mouse.mousedown = true;
    }
    
    handleMouseup(event) {
        this.mouse.mousedown = false;
    }
    
    handleDrop(event) {
        event.preventDefault();   
        
        const image = event.dataTransfer.getData('text/plain')
        this.isDragging = false;
        this.hasLoaded = false;
        
        const file = event.dataTransfer.files[0];
        
        this.handleImageFile(file);
    }

    handleImageFile(file) {        
        // check for image, if not return
        const imageType = /image.*/;
        if (!file.type.match(imageType)) return;
        
        // create image from file
        this.image = new FluidImage({
            file,
        }, SIZE);
        
        this.image.hasLoaded().then(() => {
            console.log('successfully loaded!');
            this.handleLoad();
        }).catch((e) => {
            console.log('>:-| failed:', e);
        });
    }
    
    handleLoad() {
        this.hasLoaded = true;
        this.centerImageToWindow();
        
        if (!this.demo) {
            this.demoForce();            
        }
    }
    
    handleDragOver(event) {
        event.preventDefault();
        this.isDragging = true;
    }
    
    handleDragLeave(event) {
        event.preventDefault();
        this.isDragging = false;
    }
    
    handleMouse(event) {
        const x = event.clientX * this.dpr;
        const y = event.clientY * this.dpr;
        this.mouse.x = x;
        this.mouse.y = y;
        
        this.applyForce();
    }
    
    addInitialImage() {
        // create image from file
        this.image = new FluidImage({
            src: DEMO_IMAGE,
        }, SIZE);
        
        this.image.hasLoaded().then(() => {
            this.handleLoad();
        }).catch((e) => {
            console.log('>:-| failed:', e);
        });
    }
    
    centerImageToWindow() {
        const { width: w, height: h } = this.image.canvas;
        const { width: cw, height: ch } = this.canvas;
        const tx = cw / 2 - w / 2;
        const ty = ch / 2 - h / 2;
        
        // centers points on this main canvas
        this.image.points.map(p => {
            const x = p.x + tx;
            const y = p.y + ty;
            p.setOrigin(x, y);
            return p;
        });
    }