Add a gety(x, z) function and a more interesting form.
[php lang=”JavaScript”]$(function() {
var canvas, context, width, height, x, x1, x2, y, z = 5000, fl = 350, xres = 5, zres = 5, xcenter, ycenter, zcenter, scale;
canvas = $(“#canvas”).get(0);
context = canvas.getContext(“2d”);
width = canvas.width;
height = canvas.height;
xcenter = width / 2;
ycenter = height / 2;
zcenter = 500;
context.fillStyle = “#ffffff”;
while(z > 0) {
scale = fl / (fl + z);
x1 = xcenter – width / scale / 2 * scale;
x2 = xcenter + width / scale / 2 * scale;
y = ycenter + (200 + Math.random() * 5) * scale;
context.strokeStyle = “rgba(0,0,0,” + scale + “)”;
context.beginPath();
context.moveTo(x1, y);
for(x = x1; x <= x2; x += xres) {
y = gety(x, z) * scale;
context.lineTo(x, y);
}
context.stroke();
context.lineTo(x, height);
context.lineTo(0, height);
context.closePath();
context.fill();
z -= zres;
}
function gety(x, z) {
var x1 = xcenter - x;
var z1 = zcenter - z;
var dist = Math.sqrt(x1 * x1 + z1 * z1);
return ycenter + 200 + Math.sin(dist * 0.1) * 30;
}
});[/php]
Result.