二元一次方程组与平面直角坐标系
时间：04-24来源：作者：点击数：
研究二元一次方程组与平面直角坐标系的关系，有兴趣的家长可以看看
在线演示页面：https://www.cdsy.xyz/computer/programme/html_div_css/250424/eyycfcz.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二元一次方程组与平面直角坐标系</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f9f9f9;
color: #333;
}
h1 {
text-align: center;
color: #4CAF50;
}
.container {
max-width: 800px;
margin: 0 auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.controls {
display: flex;
flex-direction: column;
gap: 10px;
}
.controls label {
display: block;
margin-bottom: 5px;
}
.controls input[type="number"],
.controls input[type="range"] {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.controls input[type="range"] {
padding: 0;
}
canvas {
border: 1px solid #ccc;
margin-top: 20px;
width: 100%; /* 设置宽度为100% */
height: auto; /* 高度自动调整 */
}
</style>
</head>
<body>
<div class="container">
<h1>二元一次方程组与平面直角坐标系</h1>
<p id="equation1">方程1形式：( y = m1x + b1 )</p>
<p id="equation2">方程2形式：( y = m2x + b2 )</p>
<p id="intersectionPoint">交点坐标：(0, 0)</p>
<div class="controls">
<div>
<label for="m1">方程1斜率 (m1):</label>
<input type="number" id="m1" value="1" step="1" oninput="updateSlider('m1')">
<input type="range" id="m1-slider" min="-5" max="5" step="1" value="1" oninput="updateInput('m1')">
</div>
<div>
<label for="b1">方程1截距 (b1):</label>
<input type="number" id="b1" value="0" step="1" oninput="updateSlider('b1')">
<input type="range" id="b1-slider" min="-10" max="10" step="1" value="0" oninput="updateInput('b1')">
</div>
<div>
<label for="m2">方程2斜率 (m2):</label>
<input type="number" id="m2" value="1" step="1" oninput="updateSlider('m2')">
<input type="range" id="m2-slider" min="-5" max="5" step="1" value="1" oninput="updateInput('m2')">
</div>
<div>
<label for="b2">方程2截距 (b2):</label>
<input type="number" id="b2" value="0" step="1" oninput="updateSlider('b2')">
<input type="range" id="b2-slider" min="-10" max="10" step="1" value="0" oninput="updateInput('b2')">
</div>
</div>
<canvas id="coordinatePlane"></canvas>
</div>
<script>
const canvas = document.getElementById('coordinatePlane');
const ctx = canvas.getContext('2d');
// 动态设置canvas的宽高
function resizeCanvas() {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientWidth; // 保持正方形
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const scale = Math.min(canvas.width, canvas.height) / 40; // 根据canvas大小调整缩放比例
// 绘制平面直角坐标系
drawCoordinatePlane(centerX, centerY, scale);
drawLines(centerX, centerY, scale);
}
// 获取输入框和滑块
const m1Input = document.getElementById('m1');
const m1Slider = document.getElementById('m1-slider');
const b1Input = document.getElementById('b1');
const b1Slider = document.getElementById('b1-slider');
const m2Input = document.getElementById('m2');
const m2Slider = document.getElementById('m2-slider');
const b2Input = document.getElementById('b2');
const b2Slider = document.getElementById('b2-slider');
// 更新滑块值
function updateSlider(id) {
if (id === 'm1') {
m1Slider.value = m1Input.value;
} else if (id === 'b1') {
b1Slider.value = b1Input.value;
} else if (id === 'm2') {
m2Slider.value = m2Input.value;
} else if (id === 'b2') {
b2Slider.value = b2Input.value;
}
updateEquations();
resizeCanvas();
}
// 更新输入框值
function updateInput(id) {
if (id === 'm1') {
m1Input.value = m1Slider.value;
} else if (id === 'b1') {
b1Input.value = b1Slider.value;
} else if (id === 'm2') {
m2Input.value = m2Slider.value;
} else if (id === 'b2') {
b2Input.value = b2Slider.value;
}
updateEquations();
resizeCanvas();
}
// 更新方程显示
function updateEquations() {
const m1 = parseFloat(m1Input.value);
const b1 = parseFloat(b1Input.value);
const m2 = parseFloat(m2Input.value);
const b2 = parseFloat(b2Input.value);
const equation1 = document.getElementById('equation1');
const equation2 = document.getElementById('equation2');
equation1.textContent = `方程1形式： y = 【${m1}】X + 【${b1}】 `;
equation2.textContent = `方程2形式： y = 【${m2}】X + 【${b2}】 `;
}
// 绘制平面直角坐标系
function drawCoordinatePlane(centerX, centerY, scale) {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制x轴和y轴
ctx.beginPath();
ctx.moveTo(0, centerY);
ctx.lineTo(canvas.width, centerY);
ctx.moveTo(centerX, 0);
ctx.lineTo(centerX, canvas.height);
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;
ctx.stroke();
// 添加箭头
ctx.beginPath();
ctx.moveTo(canvas.width - 10, centerY);
ctx.lineTo(canvas.width, centerY);
ctx.lineTo(canvas.width - 10, centerY + 10);
ctx.moveTo(centerX, 10);
ctx.lineTo(centerX, 0);
ctx.lineTo(centerX + 10, 10);
ctx.strokeStyle = '#333';
ctx.stroke();
// 添加刻度
const range = Math.floor(Math.min(canvas.width, canvas.height) / (2 * scale)); // 动态计算范围
for (let i = -range; i <= range; i++) {
const x = centerX + i * scale;
const y = centerY - i * scale;
// x轴刻度
ctx.beginPath();
ctx.moveTo(x, centerY - 5);
ctx.lineTo(x, centerY + 5);
ctx.stroke();
// y轴刻度
ctx.beginPath();
ctx.moveTo(centerX - 5, y);
ctx.lineTo(centerX + 5, y);
ctx.stroke();
// 添加刻度标签
ctx.font = '12px Arial';
ctx.textAlign = 'center';
ctx.fillText(i, x, centerY + 15);
ctx.textAlign = 'right';
ctx.fillText(-i, centerX - 5, y);
}
}
// 绘制两条直线
// 绘制两条直线
function drawLines(centerX, centerY, scale)
{
const m1 = parseFloat(m1Input.value);
const b1 = parseFloat(b1Input.value);
const m2 = parseFloat(m2Input.value);
const b2 = parseFloat(b2Input.value);
// 计算直线1的两个端点
const x1Min = -20; // x的最小值
const y1Min = m1 * x1Min + b1;
const x1Max = 20; // x的最大值
const y1Max = m1 * x1Max + b1;
// 转换为画布坐标
const canvasX1Min = centerX + x1Min * scale;
const canvasY1Min = centerY - y1Min * scale;
const canvasX1Max = centerX + x1Max * scale;
const canvasY1Max = centerY - y1Max * scale;
// 绘制直线1
ctx.beginPath();
ctx.moveTo(canvasX1Min, canvasY1Min);
ctx.lineTo(canvasX1Max, canvasY1Max);
ctx.strokeStyle = '#FF5733';
ctx.lineWidth = 3;
ctx.stroke();
// 计算直线2的两个端点
const x2Min = -20; // x的最小值
const y2Min = m2 * x2Min + b2;
const x2Max = 20; // x的最大值
const y2Max = m2 * x2Max + b2;
// 转换为画布坐标
const canvasX2Min = centerX + x2Min * scale;
const canvasY2Min = centerY - y2Min * scale;
const canvasX2Max = centerX + x2Max * scale;
const canvasY2Max = centerY - y2Max * scale;
// 绘制直线2
ctx.beginPath();
ctx.moveTo(canvasX2Min, canvasY2Min);
ctx.lineTo(canvasX2Max, canvasY2Max);
ctx.strokeStyle = '#3357FF';
ctx.lineWidth = 3;
ctx.stroke();
// 计算交点
if (m1 !== m2)
{
const xIntersect = (b2 - b1) / (m1 - m2);
const yIntersect = m1 * xIntersect + b1;
// 转换为画布坐标
const canvasXIntersect = centerX + xIntersect * scale;
const canvasYIntersect = centerY - yIntersect * scale;
// 绘制交点
ctx.beginPath();
ctx.arc(canvasXIntersect, canvasYIntersect, 5, 0, Math.PI * 2);
ctx.strokeStyle = '#00FF00';
ctx.fill();
// 更新交点坐标显示
const intersectionPoint = document.getElementById('intersectionPoint');
intersectionPoint.textContent = `交点坐标：( ${xIntersect}, ${yIntersect} )`;
// 绘制交点坐标
ctx.font = '12px Arial';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillStyle = '#000';
ctx.fillText(`( ${xIntersect}, ${yIntersect} )`, canvasXIntersect + 10, canvasYIntersect + 10);
} else
{
// 如果直线平行，没有交点
const intersectionPoint = document.getElementById('intersectionPoint');
intersectionPoint.textContent = "交点坐标：无交点";
}
}
// 初始化时绘制坐标系和直线
updateEquations();
resizeCanvas();
// 监听窗口大小变化
window.addEventListener('resize', resizeCanvas);
</script>
</body>
</html>
方便获取更多学习、工作、生活信息请关注本站微信公众号
湘公网安备 43102202000103号