HTML5中怎么用Canvas實現3D水體模擬動畫

這篇文章主要介紹了HTML5中怎么用Canvas實現3D水體模擬動畫的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇HTML5中怎么用Canvas實現3D水體模擬動畫文章都會有所收獲，下面我們一起來看看吧。

　　JavaScript

　　語言：

　　JaveScriptBabelCoffeeScript

　　確定

　　var canvas, ctx, tim, bai;

　　canvas = document.getElementsByTagName('canvas')[0];

　　ctx = canvas.getContext('2d');

　　canvas.width = canvas.height = 400;

　　aaa();

　　function aaa() {

　　var a, b, c, s, p, r, x, y, z, x1, y1, max, p2, han, h, pt, hei;

　　ctx.globalCompositeOperation = "source-over";

　　ctx.fillStyle = "rgb(0,0,0)";

　　ctx.fillRect(0, 0, canvas.width, canvas.height);

　　ctx.globalCompositeOperation = "lighter";

　　tim = new Date().getTime() / 10;

　　ctx.strokeStyle = ctx.fillStyle = "hsla(244,60%,60%,0.3)";

　　bai = 0.6 + Math.sin(tim / 471) * 0.2;

　　hei = 0.9 + Math.sin(tim / 100) * 0.3;

　　pt = [];

　　for (c = 0; c < 180; c++) {

　　s = (c + 1) / 180;

　　han = Math.cos(s * Math.PI / 2);

　　h = Math.sin(s * Math.PI / 2);

　　s = 1 - s;

　　p = [];

　　max = (100 * han) | 0;

　　r = 0;

　　for (a = 0; a < max; a++) {

　　x = Math.cos(r) * han;

　　y = Math.sin(r) * han;

　　z = nami(r, s);

　　x -= z * s;

　　p.push([x, y, hei + z * s + h]);

　　r += Math.PI * 2 / max;

　　}

　　pt.push(p);

　　}

　　for (c = 0; c < 100; c++) {

　　s = (c + 1) / 100;

　　p = [];

　　max = 100 * s;

　　r = 0;

　　for (a = 0; a < max; a++) {

　　x = Math.cos(r) * s;

　　y = Math.sin(r) * s;

　　z = nami(r, s);

　　x -= z * s;

　　p.push([x, y, hei + z * s]);

　　r += Math.PI * 2 / max;

　　}

　　pt.push(p);

　　}

　　for (c = 0; c < pt.length; c++) {

　　p = pt[c];

　　p2 = [];

　　for (a = 0; a < p.length; a++) {

　　x = p[a][0];

　　y = p[a][1];

　　z = p[a][2];

　　b = Math.pow(1.5, y / 2);

　　x1 = x * b * 150 + 200;

　　y1 = z * b * 200 - hei * 200 + 150;

　　p2.push([x1, y1]);

　　}

　　ctx.beginPath();

　　for (a = 0; a < p2.length; a++) ctx.lineTo(p2[a][0], p2[a][1]);

　　ctx.closePath();

　　ctx.stroke();

　　}

　　requestAnimationFrame(aaa);

　　}

　　function nami(r, s) {

　　var a = Math.sin(r * 2 - tim / 13 + s * 13) / 20 +

　　Math.sin(r * 5 - tim / 17 + s * 13) / 20 +

　　Math.sin(r * 7 - tim / 19 + s * 13) / 40;

　　return a * bai;

　　}

關于“HTML5中怎么用Canvas實現3D水體模擬動畫”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“HTML5中怎么用Canvas實現3D水體模擬動畫”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。