青少年编程与数学 01-009 用编程来学习数学 16课题、三角函数
青少年编程与数学 01-009 用编程来学习数学 16课题、三角函数
- 一、三角函数
- 二、编程绘制图像
- 三、调试练习
编程展示正弦和余弦函数图像。
一、三角函数
三角函数是一类数学函数，它们主要用于研究角度和三角形的边长之间的关系。最基本的三角函数有正弦（sine, sin）、余弦（cosine, cos）和正切（tangent, tan）。这些函数通常定义在一个直角三角形中，其中：
- 正弦（sin）：一个角的正弦是对边与斜边的比值。
- 余弦（cos）：一个角的余弦是邻边与斜边的比值。
- 正切（tan）：一个角的正切是对边与邻边的比值。
在单位圆（半径为1的圆）中，这些函数也可以被定义为圆上任意点的坐标值与原点连线（即半径）与x轴正方向之间的夹角的关系。
三角函数在数学、物理、工程学以及许多其他领域都有广泛的应用，特别是在处理周期性现象时特别有用。例如，在描述振动、波动、旋转运动等方面，三角函数都是不可或缺的工具。
二、编程绘制图像
编写网页，分别绘制正弦函数和余弦函数图像。要求如下：
- 先绘制坐标系，并在坐标系内绘制函数图像。
- 请使用SVG绘制。使用两个画布，宽度1000px，高度为400px，两个画布上下排列。
- 刻度的大小根据截距的数值按比例调整。，
- 需要HTML来构建界面，CSS来设置样式，以及JavaScript来实现转换逻辑。
- 所有代码都写在一个.html文件中。页面中显示中文。代码中添加中文注释。
- 设计尽量美观的样式，使用暗色调背景。页面元素在网页中合理居中。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>正弦余弦函数绘制title>
<style>
body {
background-color: #1e1e1e;
color: #fff;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin: 0;
}
svg {
background-color: #282828;
border: 1px solid #333;
align-self: center;
margin: 20px auto;
}
text {
fill: #aaa;
font-size: 12px;
}
line.axis {
stroke: #aaa;
stroke-width: 2;
}
path.function {
fill: none;
stroke: #00f;
stroke-width: 2;
}
style>
head>
<body>
<div class="container">
<h2>正弦余弦函数绘制h2>
<svg id="sin" width="1000" height="400">svg> <br>
<svg id="cos" width="1000" height="400">svg>
div>
<script>
// 获取DOM元素
const sin = document.getElementById('sin');
const cos = document.getElementById('cos');
var unit = 1;
// 绘制函数图像
function drawFunction() {
var x1;
var x2;
// 初始化
initGraph();
const sinePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
sinePath.setAttribute('d', calculatePoints(Math.sin, -Math.PI, Math.PI, 0.1));
sinePath.setAttribute('class', 'function');
sin.appendChild(sinePath);
const cosinePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
cosinePath.setAttribute('d', calculatePoints(Math.cos, -Math.PI, Math.PI, 0.1));
cosinePath.setAttribute('class', 'function');
cos.appendChild(cosinePath);
}
// 函数计算部分
function calculatePoints(func, from, to, step) {
let pathData = '';
for (let x = from; x <= to; x += step) {
let y = func(x);
// 调整Y轴方向
let xValue = x * 100 + 500; // 根据比例调整Y轴位置
let yValue = 200 - y * 100; // 根据比例调整Y轴位置
if (pathData === '') {
pathData += `M${xValue},${yValue}`;
} else {
pathData += ` L${xValue},${yValue}`;
}
}
return pathData;
}
// 初始化图形
function initGraph() {
sin.innerHTML = ''; // 清空SVG
cos.innerHTML = ''; // 清空SVG
clearCanvas();
drawAxes(unit);
}
function clearCanvas() {
while (sin.firstChild) {
sin.removeChild(sin.firstChild);
}
while (cos.firstChild) {
cos.removeChild(cos.firstChild);
}
}
// 绘制坐标轴
function drawAxes(unit) {
const axisColor = '#00dd00';
const axisWidth = 2;
// x轴 sin
sin.appendChild(createLine(0, 200, 1000, 200, axisColor, axisWidth));
// y轴
sin.appendChild(createLine(500, 0, 500, 400, axisColor, axisWidth));
// x轴 cos
cos.appendChild(createLine(0, 200, 1000, 200, axisColor, axisWidth));
// y轴
cos.appendChild(createLine(500, 0, 500, 400, axisColor, axisWidth));
// 添加刻度 x轴
for (let i = 1; i * 100 < 1000; i++) {
sin.appendChild(createLine(i * 100, 200, i * 100, 200 - 20, axisColor, axisWidth));
cos.appendChild(createLine(i * 100, 200, i * 100, 200 - 20, axisColor, axisWidth));
// 添加刻度值
addTickLabel(sin, i * 100, 200, `${(i - 5) * unit}`, 'down', axisColor);
addTickLabel(cos, i * 100, 200, `${(i - 5) * unit}`, 'down', axisColor);
}
// 添加刻度 y轴
for (let i = 1; i * 100 < 400; i++) {
sin.appendChild(createLine(500, i * 100, 500 + 20, i * 100, axisColor, axisWidth));
cos.appendChild(createLine(500, i * 100, 500 + 20, i * 100, axisColor, axisWidth));
// 添加刻度值
addTickLabel(sin, 500, i * 100, `${(2 - i) * unit}`, 'left', axisColor);
addTickLabel(cos, 500, i * 100, `${(2 - i) * unit}`, 'left', axisColor);
}
}
// 创建直线
function createLine(x1, y1, x2, y2, color, width) {
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', x1);
line.setAttribute('y1', y1);
line.setAttribute('x2', x2);
line.setAttribute('y2', y2);
line.setAttribute('stroke', color);
line.setAttribute('stroke-width', width);
return line;
}
// 添加刻度值
function addTickLabel(svg, x, y, value, position, color) {
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.textContent = value;
text.setAttribute('fill', color);
text.setAttribute('font-size', '12px');
switch (position) {
case 'down':
text.setAttribute('x', x - 5);
text.setAttribute('y', y + 25); // 下方
break;
case 'left':
text.setAttribute('x', x - 25); // 左侧
text.setAttribute('y', y + 3);
text.setAttribute('text-anchor', 'start');
break;
}
svg.appendChild(text);
}
window.onload = function () {
drawFunction(); // 绘制函数图像
};
script>
body>
html>
三、调试练习
尝试更改X自变量的聚值范围。
本单元结束。