这篇文章主要介绍了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水体模拟动画”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。
