HTML5 Canvas菱角背景动画特效

1、新建html文档以及相关文档。

2、书写html。

<svg id="demo" viewBox="0 0 1600 600" preserveAspectRatio="xMidYMid slice">

  <defs>

    <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">

      <stop id="stop1a" offset="0%" stop-color="#12a3b4"></stop>

      <stop id="stop1b" offset="100%" stop-color="#ff509e"></stop>

    </linearGradient>

    <linearGradient id="grad2" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">

      <stop id="stop2a" offset="0%" stop-color="#e3bc13"></stop>

      <stop id="stop2b" offset="100%" stop-color="#00a78f"></stop>

    </linearGradient>

  </defs>

  <rect id="rect1" x="0" y="0

  <rect id="rect2" x="0" y="0

</svg>

3、<style>

* { margin: 0; padding: 0; list-style-type: none; }

html, body { width: 100%; height: 100%; overflow: hidden; }

body { background: #e0e6eb; }

svg { width: 100%; height: 100%; }

svg g { mix-blend-mode: lighten; }

svg polygon { stroke: none; fill: white; }

</style>

4、添加引用js。

<script type="text/javascript" src="js/TweenMax.min.js"></script>

<script type="text/javascript" src="js/Stats.min.js"></script>

5、书写页面js

<script>

function init(showStats){if(showStats){var stats=new Stats();stats.domElement.style.position='absolute';stats.domElement.style.left='0';stats.domElement.style.top='0';document.body.appendChild(stats.domElement);requestAnimationFrame(function updateStats(){stats.update();requestAnimationFrame(updateStats)})}var svg=document.getElementById('demo');tesselation.setup(svg);gradients.setup();var lastTransitionAt,transitionDelay=5500,transitionDuration=3000;function playNextTransition(){tesselation.next(transitionDuration);gradients.next(transitionDuration)};function tick(time){if(!lastTransitionAt||time-lastTransitionAt>transitionDelay){lastTransitionAt=time;playNextTransition()}window.requestAnimationFrame(tick)}window.requestAnimationFrame(tick)}var calcDelaunayTriangulation=(function(){var EPSILON=1.0/1048576.0;function getSuperT(vertices){var xMin=Number.POSITIVE_INFINITY,yMin=Number.POSITIVE_INFINITY,xMax=Number.NEGATIVE_INFINITY,yMax=Number.NEGATIVE_INFINITY,i,xDiff,yDiff,maxDiff,xCenter,yCenter;for(i=vertices.length;i--;){if(vertices[i][0]<xMin)xMin=vertices[i][0];if(vertices[i][0]>xMax)xMax=vertices[i][0];if(vertices[i][1]<yMin)yMin=vertices[i][1];if(vertices[i][1]>yMax)yMax=vertices[i][1]}xDiff=xMax-xMin;yDiff=yMax-yMin;maxDiff=Math.max(xDiff,yDiff);xCenter=xMin+xDiff*0.5;yCenter=yMin+yDiff*0.5;return[[xCenter-20*maxDiff,yCenter-maxDiff],[xCenter,yCenter+20*maxDiff],[xCenter+20*maxDiff,yCenter-maxDiff]]}function circumcircle(vertices,i,j,k){var xI=vertices[i][0],yI=vertices[i][1],xJ=vertices[j][0],yJ=vertices[j][1],xK=vertices[k][0],yK=vertices[k][1],yDiffIJ=Math.abs(yI-yJ),yDiffJK=Math.abs(yJ-yK),xCenter,yCenter,m1,m2,xMidIJ,xMidJK,yMidIJ,yMidJK,xDiff,yDiff;if(yDiffIJ<EPSILON&&yDiffJK<EPSILON)throw new Error("Can't get circumcircle since all 3 points are y-aligned");m1=-((xJ-xI)/(yJ-yI));m2=-((xK-xJ)/(yK-yJ));xMidIJ=(xI+xJ)/2.0;xMidJK=(xJ+xK)/2.0;yMidIJ=(yI+yJ)/2.0;yMidJK=(yJ+yK)/2.0;xCenter=(yDiffIJ<EPSILON)?xMidIJ:(yDiffJK<EPSILON)?xMidJK:(m1*xMidIJ-m2*xMidJK+yMidJK-yMidIJ)/(m1-m2);yCenter=(yDiffIJ>yDiffJK)?m1*(xCenter-xMidIJ)+yMidIJ:m2*(xCenter-xMidJK)+yMidJK;xDiff=xJ-xCenter;yDiff=yJ-yCenter;return{i:i,j:j,k:k,x:xCenter,y:yCenter,r:xDiff*xDiff+yDiff*yDiff}}function dedupeEdges(edges){var i,j,a,b,m,n;for(j=edges.length;j;){b=edges[--j];a=edges[--j];for(i=j;i;){n=edges[--i];m=edges[--i];if((a===m&&b===n)||(a===n&&b===m)){edges.splice(j,2);edges.splice(i,2);break}}}}return function(vertices){var n=vertices.length,i,j,indices,st,candidates,locked,edges,dx,dy,a,b,c;if(n<3||n>2000)return[];vertices=vertices.slice(0);indices=new Array(n);for(i=n;i--;)indices[i]=i;indices.sort(function(i,j){return vertices[j][0]-vertices[i][0]});st=getSuperT(vertices);vertices.push(st[0],st[1],st[2]);candidates=[circumcircle(vertices,n+0,n+1,n+2)];locked=[];edges=[];for(i=indices.length;i--;edges.length=0){c=indices[i];for(j=candidates.length;j--;){dx=vertices[c][0]-candidates[j].x;if(dx>0.0&&dx*dx>candidates[j].r){locked.push(candidates[j]);candidates.splice(j,1);continue}dy=vertices[c][1]-candidates[j].y;if(dx*dx+dy*dy-candidates[j].r>EPSILON)continue;edges.push(candidates[j].i,candidates[j].j,candidates[j].j,candidates[j].k,candidates[j].k,candidates[j].i);candidates.splice(j,1)}dedupeEdges(edges);for(j=edges.length;j;){b=edges[--j];a=edges[--j];candidates.push(circumcircle(vertices,a,b,c))}}for(i=candidates.length;i--;)locked.push(candidates[i]);candidates.length=0;for(i=locked.length;i--;)if(locked[i].i<n&&locked[i].j<n&&locked[i].k<n)candidates.push(locked[i].i,locked[i].j,locked[i].k);return candidates}})();var tesselation=(function(){var svg,svgW,svgH,prevGroup;function createRandomTesselation(){var wW=window.innerWidth;var wH=window.innerHeight;var gridSpacing=250,scatterAmount=0.75;var gridSize,i,x,y;if(wW/ wH > svgW /svgH){gridSize=gridSpacing*svgW/wW}else{gridSize=gridSpacing*svgH/wH}var vertices=[];var xOffset=(svgW%gridSize)/ 2, yOffset = (svgH % gridSize) /2;for(x=Math.floor(svgW/gridSize)+1;x>=-1;x--){for(y=Math.floor(svgH/gridSize)+1;y>=-1;y--){vertices.push([xOffset+gridSize*(x+scatterAmount*(Math.random()-0.5)),yOffset+gridSize*(y+scatterAmount*(Math.random()-0.5))])}}var triangles=calcDelaunayTriangulation(vertices);var group=document.createElementNS('http://www.w3.org/2000/svg','g');var polygon;for(i=triangles.length;i;){polygon=document.createElementNS('http://www.w3.org/2000/svg','polygon');polygon.setAttribute('points',vertices[triangles[--i]][0]+','+vertices[triangles[i]][1]+' '+vertices[triangles[--i]][0]+','+vertices[triangles[i]][1]+' '+vertices[triangles[--i]][0]+','+vertices[triangles[i]][1]);group.appendChild(polygon)}return group}return{setup:function(svgElement){svg=svgElement;var vb=svg.getAttribute('viewBox').split(/\D/g);svgW=vb[2];svgH=vb[3]},next:function(t){var toRemove,i,n;t/=1000;if(prevGroup&&prevGroup.children&&prevGroup.children.length){toRemove=prevGroup;n=toRemove.children.length;for(i=n;i--;){TweenMax.to(toRemove.children[i],t*0.4,{opacity:0,delay:t*(0.3*i/n)})}TweenMax.delayedCall(t*(0.7+0.05),function(group){svg.removeChild(group)},[toRemove],this)}var g=createRandomTesselation();n=g.children.length;for(i=n;i--;){TweenMax.fromTo(g.children[i],t*0.4,{opacity:0},{opacity:0.3+0.25*Math.random(),delay:t*(0.3*i/n+0.3),ease:Back.easeOut})}svg.appendChild(g);prevGroup=g}}})();var gradients=(function(){var grad1,grad2,showingGrad1;var colors=['#3c6df0','#12a3b4','#00a78f','#00aa5e','#81b532','#e3bc13','#ffb000','#fe8500','#fe6100','#e62325','#dc267f','#c22dd5','#9753e1','#5a3ec8'];function assignRandomColors(gradObj){var rA=Math.floor(colors.length*Math.random());var rB=Math.floor(Math.random()*3)+3;rB=(rA+(rB*(Math.random()<0.5?-1:1))+colors.length)%colors.length;gradObj.stopA.setAttribute('stop-color',colors[rA]);gradObj.stopB.setAttribute('stop-color',colors[rB])}return{setup:function(){showingGrad1=false;grad1={stopA:document.getElementById('stop1a'),stopB:document.getElementById('stop1b'),rect:document.getElementById('rect1')};grad2={stopA:document.getElementById('stop2a'),stopB:document.getElementById('stop2b'),rect:document.getElementById('rect2')};grad1.rect.style.opacity=0;grad2.rect.style.opacity=0},next:function(t){t/=1000;var show,hide;if(showingGrad1){hide=grad1;show=grad2}else{hide=grad2;show=grad1}showingGrad1=!showingGrad1;TweenMax.to(hide.rect,0.55*t,{opacity:0,delay:0.2*t,ease:Sine.easeOut});assignRandomColors(show);TweenMax.to(show.rect,0.65*t,{opacity:1,ease:Sine.easeIn})}}})();init();

</script>

6、书写Stats.min.js。

var Stats=function(){function e(e){return n.appendChild(e.dom),e}function t(e){for(var t=0;t<n.children.length;t++)n.children[t].style.display=t===e?"block":"none";l=e}var l=0,n=document.createElement("div");n.style.cssText="cursor:pointer;opacity:0.9",n.addEventListener("click",function(e){e.preventDefault(),t(++l%n.children.length)},!1);var a=(performance||Date).now(),i=a,o=0,r=e(new Stats.Panel("FPS","#0ff","#002")),f=e(new Stats.Panel("MS","#0f0","#020"));if(self.performance&&self.performance.memory)var c=e(new Stats.Panel("MB","#f08","#201"));return t(0),{REVISION:16,domElement:n,addPanel:e,showPanel:t,setMode:t,begin:function(){a=(performance||Date).now()},end:function(){o++;var e=(performance||Date).now();if(f.update(e-a,200),e>i+1e3&&(r.update(1e3*o/(e-i),100),i=e,o=0,c)){var t=performance.memory;c.update(t.usedJSHeapSize/1048576,t.jsHeapSizeLimit/1048576)}return e},update:function(){a=this.end()}}};Stats.Panel=function(e,t,l){var n=1/0,a=0,i=Math.round,o=i(window.devicePixelRatio||1),r=80*o,f=48*o,c=3*o,d=2*o,s=3*o,p=15*o,u=74*o,m=30*o,h=document.createElement("canvas");h.width=r,h.height=f,h.style.cssText="width:80px;height:48px";var S=h.getContext("2d");return S.font="bold "+9*o+"px Helvetica,Arial,sans-serif",S.textBaseline="top",S.fillStyle=l,S.fillRect(0,0,r,f),S.fillStyle=t,S.fillText(e,c,d),S.fillRect(s,p,u,m),S.fillStyle=l,S.globalAlpha=.9,S.fillRect(s,p,u,m),{dom:h,update:function(f,v){n=Math.min(n,f),a=Math.max(a,f),S.fillStyle=l,S.globalAlpha=1,S.fillRect(0,0,r,p),S.fillStyle=t,S.fillText(i(f)+" "+e+" ("+i(n)+"-"+i(a)+")",c,d),S.drawImage(h,s+o,p,u-o,m,s,p,u-o,m),S.fillRect(s+u-o,p,o,m),S.fillStyle=l,S.globalAlpha=.9,S.fillRect(s+u-o,p,o,i((1-f/v)*m))}}},"object"==typeof module&&(module.exports=Stats);

7、网页整体代码结构。