html5 canvas拖动的流体图片动画效果

来源:https://www.sucaihuo.com/js/2504.html 2017-07-22 23:50浏览(1158) 收藏

一款html5 canvas拖动的流体图片动画效果,可以将指定的图片处理绘制在canvas上,并有鼠标拖动会变形的流体效果,整体效果还时比较酷炫的,喜欢的童鞋请收下吧。
html5 canvas拖动的流体图片动画效果
分类:html/css > 图形 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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;
        });
    }
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2