📜  熔岩从哪里来 - Html (1)

📅  最后修改于: 2023-12-03 14:56:12.405000             🧑  作者: Mango

熔岩从哪里来 - Html

熔岩是由地球内部高温高压下的岩石熔融产生的,其主要成分是硅酸盐。熔岩是地球表面上最常见的地质现象之一,也是火山喷发等自然灾害的重要来源。

在 HTML 中,我们可以通过使用 canvas 标签和 JavaScript 代码来模拟火山喷发和熔岩流动的效果。

<!DOCTYPE html>
<html>
<head>
	<title>Lava flow simulation</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="500" height="500"></canvas>

	<script>
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		var lavaColor = '#E74C3C';

		// 绘制火山口
		function drawVolcano() {
			ctx.beginPath();
			ctx.moveTo(200, 500);
			ctx.lineTo(300, 500);
			ctx.lineTo(250, 400);
			ctx.closePath();

			ctx.fillStyle = '#8E44AD';
			ctx.fill();
		}

		// 绘制熔岩
		function drawLava(x, y) {
			ctx.beginPath();
			ctx.arc(x, y, 10, 0, 2 * Math.PI);
			
			var gradient = ctx.createRadialGradient(x, y, 10, x, y, 50);
			gradient.addColorStop(0, lavaColor);
			gradient.addColorStop(1, 'black');
			ctx.fillStyle = gradient;

			ctx.fill();
		}

		// 帧循环
		function loop() {
			// 每隔 50 毫秒绘制一次熔岩
			setInterval(function() {
				var x = 200 + Math.random() * 100;
				var y = 450 + Math.random() * 50;

				drawLava(x, y);
			}, 50);

			// 每隔 1 秒重新绘制火山口和背景
			setInterval(function() {
				ctx.fillStyle = '#2C3E50';
				ctx.fillRect(0, 0, canvas.width, canvas.height);

				drawVolcano();
			}, 1000);
		}

		loop();
	</script>
</body>
</html>

以上代码会在页面中显示一个火山口,然后每隔 50 毫秒在火山口上方随机生成一些熔岩,并让它们流动。每隔 1 秒我们会清除画布并重新绘制火山口和背景。

注意,以上代码只是一个简单的熔岩流动模拟,实际的火山喷发和熔岩流动过程要复杂得多。如果您对此感兴趣,可以进一步研究相关的地质知识和程序实现方法。