html5 canvas实现图片玻璃碎片特效
今天要为大家带来一款html5 canvas实现的图片玻璃碎片特效。图片以玻璃碎片的形式出现到界面中,然后似玻璃被打碎的效果渐消息。效果图如下:
在线预览 源码下载
实现代码:
html代码:
<img src="city_copy.jpg" id="src_img" class="hidden"><div id="container" style="-webkit-perspective: 500px;"><div><script src="delaunay.js"></script><script src="TweenMax.min.js"></script>
js代码:
// canvas settingsvar imageWidth = 768,imageHeight = 485;var vertices = [],indices,boxes = [];var image,fragments = [],container = document.getElementById('container');window.onload = function () {image = document.getElementById('src_img');triangulate();makeBoxes();makeFragments();};function triangulate() {var x,y,dx = imageWidth / 8,dy = imageHeight / 8,offset = 0.5;for (var i = 0; i <= imageWidth; i += dx) {for (var j = 0; j <= imageHeight; j += dy) {if (i && (i !== imageWidth)) x = i + randomRange(-dx * offset, dx * offset);else x = i;if (j && (j !== imageHeight)) y = j + randomRange(-dy * offset, dy * offset);else y = j;vertices.push([x, y]);}}indices = Delaunay.triangulate(vertices);}function makeBoxes() {var p0, p1, p2,xMin, xMax,yMin, yMax;for (var i = 0; i < indices.length; i += 3) {p0 = vertices[indices[i + 0]];p1 = vertices[indices[i + 1]];p2 = vertices[indices[i + 2]];xMin = Math.min(p0[0], p1[0], p2[0]);xMax = Math.max(p0[0], p1[0], p2[0]);yMin = Math.min(p0[1], p1[1], p2[1]);yMax = Math.max(p0[1], p1[1], p2[1]);boxes.push({x: xMin,y: yMin,w: xMax - xMin,h: yMax - yMin});}}function makeFragments() {var p0, p1, p2,box,fragment;TweenMax.set(container, { perspective: 500 });var tl0 = new TimelineMax({ repeat: -1 });for (var i = 0; i < indices.length; i += 3) {p0 = vertices[indices[i + 0]];p1 = vertices[indices[i + 1]];p2 = vertices[indices[i + 2]];box = boxes[i / 3];fragment = new Fragment(p0, p1, p2, box);var rx = randomRange(30, 60) * ((i % 2) ? 1 : -1);var ry = randomRange(30, 60) * ((i % 2) ? -1 : 1);var tl1 = new TimelineMax();TweenMax.set(fragment.canvas, {y: box.y - 1000});tl1.to(fragment.canvas, randomRange(0.9, 1.1), {y: box.y,ease: Back.easeOut});tl1.to(fragment.canvas, 0.5, {z: -100,ease: Cubic.easeIn,delay: 0.4});tl1.to(fragment.canvas, randomRange(1, 1.2), {rotationX: rx,rotationY: ry,z: 250,alpha: 0,ease: Cubic.easeOut});tl0.insert(tl1);fragments.push(fragment);container.appendChild(fragment.canvas);}}function randomRange(min, max) {return min + (max - min) * Math.random();}Fragment = function (v0, v1, v2, box) {this.v0 = v0;this.v1 = v1;this.v2 = v2;this.box = box;this.canvas = document.createElement('canvas');this.canvas.width = this.box.w;this.canvas.height = this.box.h;this.canvas.style.width = this.box.w + 'px';this.canvas.style.height = this.box.h + 'px';this.ctx = this.canvas.getContext('2d');TweenMax.set(this.canvas, {x: this.box.x,y: this.box.y});this.ctx.translate(-this.box.x, -this.box.y);this.ctx.beginPath();this.ctx.moveTo(this.v0[0], this.v0[1]);this.ctx.lineTo(this.v1[0], this.v1[1]);this.ctx.lineTo(this.v2[0], this.v2[1]);this.ctx.closePath();this.ctx.clip();this.ctx.drawImage(image, 0, 0);}; //@ sourceURL=pen.js
View Code
注:本文爱编程原创文章,转载请注明原文地址:http://***/Article/6399
转载于:https://www.cnblogs.com/liaohuolin/p/3965734.html
html5 canvas实现图片玻璃碎片特效相关推荐
- js 图片打碎_html5 canvas打碎的图片玻璃碎片特效
特效描述:html5canvas 打碎的图片 玻璃碎片特效.玻璃碎片特效 代码结构 1. 引入JS 2. HTML代码 var imageWidth = 768, imageHeight = 485; ...
- HTML5 canvas点击爆炸网页特效代码
简介: HTML5 canvas点击爆炸网页特效代码, 直接写在想要出现特效的页面,如果是cms则放在所用的模板文件下foot.php文件里. 网盘下载地址: http://kekewl.net/3D ...
- 如何消除图片锯齿 html,Html5 canvas drawImage图片抗锯齿
Html5 canvas drawImage图片抗锯齿2018-01-26 11:17 虽然drawImage会自动应用消除锯齿,但如果是从大尺寸变为小尺寸,某些图像就不尽人意了,比如曲线. 对于可能 ...
- html 产生烟雾效果,html5 canvas抽象模糊烟雾动画特效
特效描述:html5 canvas 抽象模糊 烟雾动画特效.html5 canvas绘制彩色模糊的烟雾动画.抽象模糊的烟雾动画特效 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 vo ...
- html5怎么做出旋转效果,HTML5+Canvas制作的幻彩旋转圆盘特效
HTML5+Canvas制作的幻彩旋转圆盘特效 body { background: #000; color: #aaa; font: 100%/20px helvetica; } canvas { ...
- html画布敲碎的视频,html5 canvas碎纸屑空中飘落动画特效
特效描述:html5 canvas碎纸屑 空中飘落动画特效.canvas绘制空中飘落的纸屑动画特效. 代码结构 1. HTML代码 "use strict"; var _creat ...
- 面条html5,利用HTML5 Canvas实现一碗面条特效
特效描述:利用HTML5 Canvas实现一碗面条特效.利用HTML5 Canvas实现一碗面条特效 代码结构 1. HTML代码 // Initiate Canvas let can = docum ...
- html5 雨滴效果,html5 canvas下雨滴掉落动画特效
特效描述:html5 canvas 雨滴掉落动画 动画特效.html5 canvas绘制下雨场景动画.雨滴动画. 代码结构 1. 引入JS 2. HTML代码 // TO DO // Remove r ...
- 用HTML5 Canvas为Web图形创建特效
HTML5 Canvas 将使用像素在屏幕上绘制图形图像. 本节演示了五种用于操作像素以创建摄影特效的 Canvas 技术. 您可使用这些技术来生成独具特色的图像,为您的网站.博客.视频游戏画面.广告 ...
最新文章
- 「任务总览」优化更新,团队协作愈加高效敏捷
- c语言画图 钟表模拟程序,图形模拟时钟C语言课程设计
- 一个完整网站的代码_网站优化三步走,怎样给自己的网站做优化?
- JSR 303 - Bean Validation与Hibernate Validation 介绍
- github 开放_GitHub为女性开发人员所做的工作,Tim O'Reilly谈开放数据等
- matex2已搭载鸿蒙系统了吗,华为MATE40被曝两个版本,有望搭载鸿蒙OS,MATEX2也即将到来...
- 博途调试g120_【免费资料】西门子变频器调试软件汇总
- Unity Odin从入门到精通(五):自定义处理器
- NetFlow网络流量分析
- 只利用 phpstudy 如何运行PHP文件 超详细教程
- Python定时执行程序(schedule)
- aws mysql rds_AWS 新建RDS实例 for MySQL
- 软件测试 - 软件测试流程(完整版)避免当背锅侠,测试人的生存......
- 求多项式浮点java思路,求多项式函数实数根的方法
- 什么是Google PR值? 如何提高PR值?
- 【CSDN官方】C技能树深度测评
- DOS、DDos攻击详解
- Web端性能测试和安全测试要点
- eventfd的用法
- MATLAB--向量操作(1.3)