console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Graph of y = x^2</title>
</head>
<body>
<canvas id="graphCanvas" width="600" height="400" style="border:1px solid #000;"></canvas>

<script>
// 获取canvas元素
var canvas = document.getElementById('graphCanvas');
var ctx = canvas.getContext('2d');

// 设置canvas的尺寸
canvas.width = 600;
canvas.height = 400;

// 绘制坐标轴
ctx.beginPath();
ctx.moveTo(100, canvas.height - 50);
ctx.lineTo(100, 50);
ctx.lineTo(canvas.width - 50, 50);
ctx.stroke();

// 绘制y = x^2
ctx.beginPath();
for (var x = -10; x <= 10; x += 0.1) {
    var y = x * x; // 计算y值
    // 将x和y值转换为canvas坐标
    var canvasX = 100 + x * 20;
    var canvasY = canvas.height - 50 - y * 20;
    ctx.lineTo(canvasX, canvasY);
}
ctx.stroke();
</script>
</body>
</html>