Heim > Web-Frontend > H5-Tutorial > Hauptteil

Ein Bildglasfragment-Spezialeffekt, der durch HTML5-Canvas_HTML5-Tutorial-Fähigkeiten implementiert wird

PHP中文网
Freigeben: 2016-05-16 15:47:32
Original
2616 Leute haben es durchsucht

Heute präsentiere ich Ihnen einen Spezialeffekt aus Bildglasfragmenten, der in eine HTML5-Leinwand implementiert wurde. Das Bild erscheint in der Benutzeroberfläche in Form von Glasfragmenten, und dann verblasst der Effekt von Glasscherben allmählich. Die Darstellung ist wie folgt:


HTML-Code:

Der Code lautet wie folgt:

<img src="city_copy.jpg" id="src_img" class="hidden"> 
<p id="container" style="-webkit-perspective: 500px;"> 
<p> 
<script src="delaunay.js?1.1.5"></script> 
<script src="TweenMax.min.js?1.1.5"></script>
Nach dem Login kopieren

JS-Code:

Der Code lautet wie folgt:

// canvas settings 
var imageWidth = 768, 
imageHeight = 485; 
var vertices = [], 
indices, 
boxes = []; 
var image, 
fragments = [], 
container = document.getElementById(&#39;container&#39;); 
window.onload = function () { 
image = document.getElementById(&#39;src_img&#39;); 
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(&#39;canvas&#39;); 
this.canvas.width = this.box.w; 
this.canvas.height = this.box.h; 
this.canvas.style.width = this.box.w + &#39;px&#39;; 
this.canvas.style.height = this.box.h + &#39;px&#39;; 
this.ctx = this.canvas.getContext(&#39;2d&#39;); 
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
Nach dem Login kopieren


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage