相邻点圆形区域遮罩鼠标交互动效

Proximity Mask with Canvas

h5, canvas, mask

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

let parameters = {
    size: 30,
    radius: 1,
    proximity: 125,
    growth: 60,
    ease: 0.075,
    stats: false,
};

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
}

class Circle {
    constructor(radius, x, y) {
        this._radius = radius;
        this.radius = radius;
        this.growthValue = 0;
        this.position = new Point(x, y);
    }

/**
     * @param {CanvasRenderingContext2D} context
     * @param {number} ease
     */
    draw(context, ease) {
        this.radius += ((this._radius + this.growthValue) - (this.radius)) * ease;
        context.moveTo(this.position.x, this.position.y);
        context.arc(this.position.x, this.position.y, this.radius, 0, 2 * Math.PI);
    }

addRadius(value) {
        this.growthValue = value;
    }

get x() {
        return this.position.x;
    }

set x(value) {
        this.position.x = value;
    }

get y() {
        return this.position.y;
    }

set y(value) {
        this.position.y = value;
    }
}

class Stamp {
    constructor(id) {
        const el = document.getElementById(id);
        const parent = el.parentElement;
        parent.removeChild(el);
        const chars = el.innerText.split("");
        chars.push(" ");
        for (let i = 0; i < chars.length; i++) {
            const span = document.createElement("span");
            span.innerText = chars[i];
            span.className = `char${i + 1}`;
            parent.appendChild(span);
        }
    }
}

function init(){
   new Stamp("circle-content");
   const stats = new Stats();
   stats.showPanel(0);
  
  buildGUI();
    let imageLoaded = false;
    const canvas = document.getElementById("c");
    const image = new Image();
    let circles = [];
    const context = canvas.getContext("2d");
    window.addEventListener("resize", resizeHandler);
    window.addEventListener("mousemove", mouseMoveHandler);
    window.addEventListener("touchmove", touchMoveHandler);
    resizeHandler();
    loadImage();
    build();

function mouseMoveHandler(event) {
        proximityHandler(event);
    }
  
    function touchMoveHandler(event) {
        proximityHandler(event.touches[0])
    }

function buildGUI() {
        const gui = new dat.GUI({closed: true});
        gui.closed = true;
        const sizeController = gui.add(parameters, "size", 5, 80);
        const radiusController = gui.add(parameters, "radius", 0.5, 20);
        gui.add(parameters, "proximity", 0, 300);
        gui.add(parameters, "growth", 1, 150);
        gui.add(parameters, "ease", 0.02, 0.15);
        const statsController = gui.add(parameters, "stats");

sizeController.onFinishChange(() => {
            build();
        });

radiusController.onFinishChange(() => {
            build();
        });

statsController.onChange((value) => {
            if (value) {
                document.body.appendChild(stats.dom);
            } else {
                stats.dom.parentNode.removeChild(stats.dom);
            }
        })
    }

function drawImage() {
        context.clip();
        const {naturalHeight, naturalWidth} = image;
        const ratio = findPreferredRatio(naturalWidth, naturalHeight, window.innerWidth, window.innerHeight);
        const w = naturalWidth * ratio;
        const h = naturalHeight * ratio;
        const x = window.innerWidth / 2 - w / 2;
        const y = window.innerHeight / 2 - h / 2;
        context.drawImage(image, 0, 0, naturalWidth, naturalHeight, x, y, w, h);
    }

function resizeHandler() {
        resizeCanvas(canvas);
        build();
    }

function loadImage() {
        image.onload = function () {
            imageLoaded = true;
        };
        image.src = "https://camo.githubusercontent.com/439826448be7909f3d90757596c7d9f2d4aacc56/68747470733a2f2f6c68362e676f6f676c6575736572636f6e74656e742e636f6d2f2d334c69462d4d426c364f452f554f3554585a37323461492f41414141414141414535302f4a574c716465454d3951592f73323536302f436f6c6f7261646f253242526976657225324253756e7365742e6a7067";
    }

animate();
}

init();

function normalize(value, min, max) {
    return (value - min) / (max - min);
}

function interpolate(value, min, max) {
    return min + (max - min) * value;
}

function map(value, min1, max1, min2, max2) {
    return interpolate(normalize(value, min1, max1), min2, max2);
}

function findPreferredRatio(width, height, maxWidth, maxHeight) {
    let dw = maxWidth / width;
    let dh = maxHeight / height;
    return dw > dh ? dw : dh;
}

function resizeCanvas (canvas) {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

编译

CSS

body {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    background-color: #e0dad5;
    margin: 0;
    padding: 0;
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
canvas {
    width: 100%;
    height: 100%;
}
.stamp {
    position: absolute;
    right: 6vmax;
    top: 6vmax;
}
.stamp p {
    color: #ee3d3d;
    font-size: 2vmax;
    font-family: 'Asul', sans-serif;
    margin: 0;
}
.stamp .circle {
    position: absolute;
    width: 1px;
    height: 1px;
    display: block;
    left: 50%;
    top: 50%;
    background-color: transparent;
    -webkit-animation: rotating 9.5s linear infinite;
    animation: rotating 9.5s linear infinite;
}
.stamp .circle span {
    font-family: 'Rubik', sans-serif;
    font-weight: bold;
    font-size: 0.8vmax;
    color: #ee3d3d;
    height: 5vmax;
    position: absolute;
    display: inline-block;
    left: 0;
    bottom: 0;
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
}
.char1 {
    -webkit-transform: rotate(13deg);
    transform: rotate(13deg);
}
.char2 {
    -webkit-transform: rotate(26deg);
    transform: rotate(26deg);
}
.char3 {
    -webkit-transform: rotate(39deg);
    transform: rotate(39deg);
}
.char4 {
    -webkit-transform: rotate(52deg);
    transform: rotate(52deg);
}
.char5 {
    -webkit-transform: rotate(65deg);
    transform: rotate(65deg);
}
.char6 {
    -webkit-transform: rotate(78deg);
    transform: rotate(78deg);
}
.char7 {
    -webkit-transform: rotate(91deg);
    transform: rotate(91deg);
}
.char8 {
    -webkit-transform: rotate(104deg);
    transform: rotate(104deg);
}
.char9 {
    -webkit-transform: rotate(117deg);
    transform: rotate(117deg);
}
.char10 {
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg);
}
.char11 {
    -webkit-transform: rotate(143deg);
    transform: rotate(143deg);
}
.char12 {
    -webkit-transform: rotate(156deg);
    transform: rotate(156deg);
}
.char13 {
    -webkit-transform: rotate(169deg);
    transform: rotate(169deg);
}
.char14 {
    -webkit-transform: rotate(182deg);
    transform: rotate(182deg);
}
.char15 {
    -webkit-transform: rotate(195deg);
    transform: rotate(195deg);
}
.char16 {
    -webkit-transform: rotate(208deg);
    transform: rotate(208deg);
}
.char17 {
    -webkit-transform: rotate(221deg);
    transform: rotate(221deg);
}
.char18 {
    -webkit-transform: rotate(234deg);
    transform: rotate(234deg);
}
.char19 {
    -webkit-transform: rotate(247deg);
    transform: rotate(247deg);
}
.char20 {
    -webkit-transform: rotate(260deg);
    transform: rotate(260deg);
}
.char21 {
    -webkit-transform: rotate(273deg);
    transform: rotate(273deg);
}
.char22 {
    -webkit-transform: rotate(286deg);
    transform: rotate(286deg);
}
.char23 {
    -webkit-transform: rotate(299deg);
    transform: rotate(299deg);
}
.char24 {
    -webkit-transform: rotate(312deg);
    transform: rotate(312deg);
}
.char25 {
    -webkit-transform: rotate(325deg);
    transform: rotate(325deg);
}
.char26 {
    -webkit-transform: rotate(338deg);
    transform: rotate(338deg);
}
.char27 {
    -webkit-transform: rotate(351deg);
    transform: rotate(351deg);
}
.char28 {
    -webkit-transform: rotate(364deg);
    transform: rotate(364deg);
}
@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

HTML

Proximity Mask with Canvas

h5, canvas, mask

编辑器支持Emmet

快捷键

Proximity Mask with Canvas

h5, canvas, mask

使用WebGL实现粘稠遮罩交互动画特效

HTML5 Canvas + Hammer.js圆点矩阵平面凸起交互动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：