一款html5 canvas拖动的流体图片动画效果,可以将指定的图片处理绘制在canvas上,并有鼠标拖动会变形的流体效果,整体效果还时比较酷炫的,喜欢的童鞋请收下吧。
页面的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;
});
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791