以下是一个简单的HTML代码,它使用JavaScript和Canvas来绘制一个指数衰减曲线。每行代码后面都有注释,以帮助理解代码的功能。
<!DOCTYPE html> <!-- 定义文档类型 -->
<html> <!-- HTML文档的根元素 -->
<head> <!-- 文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8 -->
<title>指数衰减曲线</title> <!-- 定义文档的标题 -->
</head>
<body> <!-- 包含文档的所有内容,如文本、超链接、图片、表格、列表等 -->
<canvas id="myCanvas" width="500" height="500"></canvas> <!-- 创建一个画布 -->
<script> // 插入JavaScript代码
// 获取画布元素
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 定义指数衰减函数
function decay(x) {
return Math.exp(-x);
}
// 绘制坐标轴
ctx.beginPath();
ctx.moveTo(50, 250);
ctx.lineTo(450, 250);
ctx.moveTo(250, 50);
ctx.lineTo(250, 450);
ctx.stroke();
// 绘制指数衰减曲线
ctx.beginPath();
ctx.moveTo(50, 250);
for (let i = 0; i <= 400; i += 1) {
ctx.lineTo(50 + i, 250 - decay(i / 100) * 200);
}
ctx.stroke();
</script>
</body>
</html>
这个代码创建了一个500x500像素的画布,并在其中绘制了一个指数衰减曲线。你可以根据需要修改这个代码,例如改变画布大小、调整函数参数等。希望这个示例对你有所帮助!