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

canvas animation with SVG filter(gooey) 使用鼠标移动可以打碎整个背景图像。

svg, canvas, particle

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    canvasB = document.getElementById("canvasB"),
    contextB = canvasB.getContext("2d"),
    preloading = document.querySelector(".preloading"),
    statsDiv = document.getElementById("stats"),
    svgBlur = document.getElementsByTagName("feGaussianBlur")[0],
    svgMatrix = document.getElementsByTagName("feColorMatrix")[0],
    density = 14,
    scale = 16,
    stats = new Stats(),
    width = canvas.width = canvasB.width = window.innerWidth,
    height = canvas.height = canvasB.height = window.innerHeight,
    imageSize = {
        w: 500,
        h: height > 500 ? 500 : height
    };

statsDiv.appendChild(stats.domElement);

var mouse = {
        radius: 1000,
        x: -100,
        y: -100,
        dist: 0
    },
    pixels = [];

//setting dat.GUI
//SVG filter's default values
var controls = new function() {
    this.blurValue = 1;
    this.alphaChannel = 25;
    this.alphaOffset = -7;
    this.isSVGFilter = true;
}();

var gui = new dat.GUI();
gui.add(controls, "blurValue", 0, 3).onChange(function(e) {
    svgBlur.setAttribute("stdDeviation", e);
});

gui.add(controls, "alphaChannel", 1, 60).onChange(function(e) {
    svgMatrix.setAttribute("values", "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 " + e + " " + controls.alphaOffset);
});

gui.add(controls, "alphaOffset", -10, 0).onChange(function(e) {
    svgMatrix.setAttribute("values", "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 " + controls.alphaChannel + " " + e);
});

gui.add(controls, "isSVGFilter").onChange(function(e) {
    e === false ? canvas.classList.remove("blur") : canvas.classList.add("blur");
});

var Pixel = function() {
    function Pixel(w, h, r, g, b) {
        _classCallCheck(this, Pixel);

this.x = this.originX = w;
        this.y = this.originY = h;
        this.r = r;
        this.g = g;
        this.b = b;
        this.vx = this.rx = 0;
        this.vy = this.ry = 0;
        this.dist = 0;
        this.angle = 0;
        this.force = 0;
    }

Pixel.prototype.update = function update() {
        this.rx = this.x - mouse.x;
        this.ry = this.y - mouse.y;
        this.dist = this.rx * this.rx + this.ry * this.ry;
        this.force = mouse.radius * 4 / this.dist;

if (this.dist < mouse.radius && mouse.dist > 15) {
            this.angle = Math.atan2(this.ry, this.rx);
            this.vx += Math.cos(this.angle) * this.force;
            this.vy += Math.sin(this.angle) * this.force;
        }

this.vx *= .95;
        this.vy *= .95;
        this.x += this.vx + (this.originX - this.x) * .06;
        this.y += this.vy + (this.originY - this.y) * .06;
    };

return Pixel;
}();

getPixel();

function getPixel() {
    var image = new Image();
    // the image can't be loading in safari. but i have no idea what to do（◞‸◟）
    image.src = "/uploads/161001/mona.jpg" + "?" + new Date().getTime();
    image.crossOrigin = "Anonymous";
    image.onload = function() {
        contextB.clearRect(0, 0, width, height);

var offsetWidth = Math.round((width - imageSize.w) / 2),
            offsetHeight = Math.round((height - imageSize.h) / 2);

contextB.drawImage(image, offsetWidth, offsetHeight, imageSize.w, imageSize.h);
        var imageData = contextB.getImageData(offsetWidth, offsetHeight, imageSize.w, imageSize.h),
            pixelData = imageData.data;

for (var h = offsetHeight; h < offsetHeight + imageSize.h; h += density) {
            for (var w = offsetWidth; w < offsetWidth + imageSize.w; w += density) {
                var pointX = w - offsetWidth,
                    pointY = h - offsetHeight,
                    point = pointY * imageSize.w + pointX;
                pixels.push(new Pixel(w, h, pixelData[point * 4], pixelData[point * 4 + 1], pixelData[point * 4 + 2]));
            }
        }
        preloading.classList.add("loading-finish");
        draw();
    };
}

function draw() {
    stats.begin();
    context.clearRect(0, 0, width, height);
    for (var i = 0, len = pixels.length; i < len; i++) {
        var p = pixels[i];
        p.update();
        context.strokeStyle = "rgb(" + p.r + "," + p.g + "," + p.b + ")";
        context.strokeRect(p.x - scale / 2, p.y - scale / 2, scale, scale);
    }
    stats.end();
    requestAnimationFrame(draw);
}

canvas.addEventListener("mousemove", function(e) {
    var mouseX = mouse.x,
        mouseY = mouse.y;
    mouse.x = e.clientX;
    mouse.y = e.clientY;
    mouse.dist = (mouseX - mouse.x) * (mouseX - mouse.x) + (mouseY - mouse.y) * (mouseY - mouse.y);
}, false);

canvas.addEventListener("mouseout", function(e) {
    mouse.dist = 0;
});

编译

CSS

HTML

canvas animation with SVG filter(gooey) 使用鼠标移动可以打碎整个背景图像。

svg, canvas, particle

编辑器支持Emmet

快捷键

canvas animation with SVG filter(gooey) 使用鼠标移动可以打碎整个背景图像。

svg, canvas, particle

使用SVG feImage和feDisplacementMap滤镜属性实现的图片特效

使用SVG feDisplacementMap特性实现图片脉冲波动动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：