HTML5 3D衣服摇摆动画特效_html5教程技巧

这又是一款基于HTML5 Canvas的3D动画杰作，它是一个可以随风飘动的3D衣服摇摆动画特效，非常逼真。当我们将鼠标滑过衣服时，衣服将会出现摇摆的动画，点击鼠标时，衣服将会更加剧烈地摆动。

在线演示 源码下载

HTML代码

1. <div style="width:500px;margin:10px auto">
2. <canvas id="cv" width="480" height="300">canvas>
3. <p>"3D on 2D Canvas" demop>
4. <p>move cursor to pan / click to swingp>
5. div>

P3D库JS代码，主要用来处理3D效果的

1. window.P3D = {
2. texture: null,
3. g: null
4. };
6. P3D.clear = function(f, w, h) {
7. var g = this.g;
8. g.beginPath();
9. g.fillStyle = f;
10. g.fillRect(0, 0, w, h);
12. }
14. P3D.num_cmp = function(a,b){return a-b;}
16. P3D.drawTriangle = function(poss, uvs, shade_clr) {
17. var w = this.texture.width;
18. var h = this.texture.height;
20. var g = this.g;
22. var vAd = [ poss[1].x - poss[0].x , poss[1].y - poss[0].y ];
23. var vBd = [ poss[2].x - poss[0].x , poss[2].y - poss[0].y ];
25. var vA = [ uvs[1].u - uvs[0].u , uvs[1].v - uvs[0].v ];
26. var vB = [ uvs[2].u - uvs[0].u , uvs[2].v - uvs[0].v ];
28. vA[0] *= w;
29. vA[1] *= h;
31. vB[0] *= w;
32. vB[1] *= h;
34. var m = new M22();
35. m._11 = vA[0];
36. m._12 = vA[1];
37. m._21 = vB[0];
38. m._22 = vB[1];
40. var im = m.getInvert();
41. if (!im) return false;
43. var a = im._11 * vAd[0] + im._12 * vBd[0];
44. var b = im._21 * vAd[0] + im._22 * vBd[0];
46. var c = im._11 * vAd[1] + im._12 * vBd[1];
47. var d = im._21 * vAd[1] + im._22 * vBd[1];
49. var wu = uvs[0].u * w;
50. var hv = uvs[0].v * h;
51. var du = wu * a + hv * b;
52. var dv = wu * c + hv * d;
54. g.save();
56. g.beginPath();
57. g.moveTo(poss[0].x, poss[0].y);
58. g.lineTo(poss[1].x, poss[1].y);
59. g.lineTo(poss[2].x, poss[2].y);
60. g.clip();
62. g.transform(a, c, b, d, poss[0].x - du, poss[0].y - dv);
64. // bounds
65. var bx = [wu, wu+vA[0], wu+vB[0]];
66. var by = [hv, hv+vA[1], hv+vB[1]];
68. bx.sort(P3D.num_cmp);
69. by.sort(P3D.num_cmp);
71. var bw = bx[2] - bx[0];
72. var bh = by[2] - by[0];
74. if ((bx[0]+bw) <= (w-1)) bw++;
75. if ((by[0]+bh) <= (h-1)) bh++;
76. if (bx[0] >= 1) {bx[0]--; bw++;}
77. if (by[0] >= 1) {by[0]--; bh++;}
79. g.drawIma