canvas液体图像

下载代码

html

css

js

分享到微信朋友圈

X

html

css

JavaScript

let canvas, 
    ctx, 
	system,
	gridSize = 40,
	spacing = 10,
    width = height = (gridSize - 1) * spacing,
	mouseX = 262, // Positioning mouse values so they affect good portion of image at start :)
	mouseY = 182,
	imgSrc = new Image(),
	imgURL,
	drawVertices = false,
	first = true;
const msqrt = Math.sqrt;

let jelly = 'https://picsum.photos/id/162/728/485';
let boris = 'https://picsum.photos/id/164/728/485';
let water = 'https://picsum.photos/id/167/728/485';

imgURL = jelly;

const ParticleSystem = function(){
    this.friction = .98; // 1 MAX
    this.mouseRepelDist = 50; // Size of repel circle
    this.mouseForce = .02; // Strength of mouse influence
    this.springForce = .2; // speed of return to spring point. Tightness
    this.numParticles = gridSize * gridSize; 
    this.particles = [];
    this.faces = [];
}
ParticleSystem.prototype.generate = function(){
    for(let i=0; i<this.numParticles; i++){
        this.particles.push(new Vertices(((i % gridSize) * spacing), (Math.floor(i / gridSize) * spacing), this));
    }
}
ParticleSystem.prototype.update = function(){
    for(let i=0; i<this.numParticles; i++){
        this.particles[i].update();
    }
}
const Vertices = function(x, y, parentSystem){
    this.x = x;
    this.y = y;
    this.sx = this.x;
    this.sy = this.y;
    this.vx = 0;
    this.vy = 0;
    this.parentSystem = parentSystem;
    return this;
}
Vertices.prototype.update = function(){
    // apply friction
    this.vx *= this.parentSystem.friction;
    this.vy *= this.parentSystem.friction;

// stay attached to point
	this.vx += (this.sx - this.x) * this.parentSystem.springForce;
	this.vy += (this.sy - this.y) * this.parentSystem.springForce;

// avoid the mouse
	let dx = mouseX - this.x;
	let dy = mouseY - this.y;
	let dist = msqrt(dx*dx + dy*dy);
	if (dist < this.parentSystem.mouseRepelDist) {
		let tx = mouseX - this.parentSystem.mouseRepelDist * dx / dist;
		let ty = mouseY - this.parentSystem.mouseRepelDist * dy / dist;
		this.vx += (tx - this.x) * this.parentSystem.mouseForce;
		this.vy += (ty - this.y) * this.parentSystem.mouseForce;
	}

// update position
    this.x += this.vx;
    this.y += this.vy;
}

const Face = function(vertices, sData){
	this.vertices = vertices;
	this.sData = sData;
}
Face.prototype.draw = function(){
	ctx.drawImage(imgSrc, 
				  this.sData.x, this.sData.y, this.sData.w, this.sData.h, 
				  this.vertices[0].x, this.vertices[0].y,
				  this.vertices[1].x - this.vertices[0].x, this.vertices[2].y - this.vertices[0].y);
}

function createCanvas(w, h){
    let tCanvas = document.createElement('canvas');
    tCanvas.width = w;
    tCanvas.height = h;
    return tCanvas;
}
function handleImageLoad(){
	let imgw = (imgSrc.naturalWidth / (gridSize-1));
	let imgh = (imgSrc.naturalHeight / (gridSize-1));
	for(let i=0; i<system.numParticles - gridSize; i++){
		if((gridSize-1) !== i % gridSize){
			let verts = [
							system.particles[i],
							system.particles[i + 1],
							system.particles[i + gridSize]
						];
			let imgData = {
							x: (i % gridSize) * imgw,
							y: (Math.floor(i / gridSize)) * imgh,
							w: imgw,
							h: imgh
						};
			system.faces.push(new Face(verts, imgData));
		}
	}
	if(first){
		setUpEvents();
		animate();
		first = false;
	}
}
function setUpEvents(){
	/* MOUSE EVENTS */
    function getMousePos(canvas, evt) {
        let rect = canvas.getBoundingClientRect();
        return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };
    }
    document.addEventListener('mousemove', function(evt) {
        let mousePos = getMousePos(canvas, evt);
        mouseX = mousePos.x;
        mouseY = mousePos.y;
    }, false);
	
	/* TOUCH EVENTS */
	document.addEventListener('touchstart', function(e){
		let touchobj = e.changedTouches[0];
		mouseX = touchobj.pageX;
		mouseY = touchobj.pageY;
		e.preventDefault();
	}, false);
	document.addEventListener('touchmove', function(e){
		let touchobj = e.changedTouches[0];
		mouseX = touchobj.pageX;
		mouseY = touchobj.pageY;
		e.preventDefault();
	}, false);
	
	document.querySelector('.grid').addEventListener('click', () => { drawVertices = !drawVertices });
	document.querySelector('.water').addEventListener('click', () => { newImage(water) });
	document.querySelector('.boris').addEventListener('click', () => { newImage(boris) });
	document.querySelector('.jelly').addEventListener('click', () => { newImage(jelly) });
}

function newImage(newImg){
    system.faces = [];
	imgSrc.src = newImg;
}

function getShareable(){
	let hash = window.location.hash;
	if(hash !== ''){
		if(hash.indexOf('=') === -1){
			return;
		}
		let name = hash.split('=')[0];
		if(name === '#imgURL'){
			imgURL = hash.split('=')[1];
		}
	}
}

function init(){
	// getShareable(); // Only works in debug
	
    canvas =  createCanvas(width, height);
    document.querySelector('.wrapper').appendChild(canvas);
    ctx = canvas.getContext('2d');
	ctx.fillStyle = '#fa4';

/* Define new ParticleSystem and set values */
    system = new ParticleSystem();
    system.generate();
	
	/* Load image */
	imgSrc.onload = handleImageLoad;
	imgSrc.src = imgURL;
}

function draw(){
	ctx.fillStyle = 'rgba(0,5,0,.1)'; // Smooths out the effect on FireFox
    ctx.fillRect(0, 0, width, height);
	for(let loop = system.faces.length, i=0; i<loop; i++) {
		system.faces[i].draw();
	}
	if(drawVertices){
		ctx.fillStyle = '#fa4';
		for(let i=0; i<system.numParticles; i++) {
			ctx.beginPath();
			ctx.fillRect(system.particles[i].x, system.particles[i].y, 1, 1);
		}
	}
}
function animate(){
    system.update();
    draw();
    requestAnimationFrame(animate);
}

init();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas液体图像-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号