html5 水效果图,HTML5 Canvas 逼真的3D水体模拟动画

作者：管理员

发布时间：2021/7/29 19:07:51

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=5180

　　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;


　　}






关键字：jquery