XSToolBox/函数绘制.html at master · yxcqr/XSToolBox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>短煊函数图像绘制工具</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #container {
            width: 800px;
            height: 600px;
            margin-bottom: 20px;
        }
        #controls {
            margin-bottom: 20px;
        }
        select, input[type="text"], input[type="color"] {
            font-size: 16px;
            padding: 5px;
            margin-right: 10px;
        }
        button {
            font-size: 16px;
            padding: 5px 10px;
            margin-right: 10px;
        }
        .alert {
            font-size: 14px;
            padding: 5px;
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
            border-radius: 3px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div id="container">
    <canvas id="myChart"></canvas>
</div>
<div id="controls">
    <p>请选择函数类型：</p>
    <select id="functionType" onchange="drawFunction()">
        <option value="linear">线性函数</option>
        <option value="quadratic">二次函数</option>
        <option value="sinusoidal">正弦函数</option>
    </select>
    <p>请输入函数表达式（使用x作为变量）：</p>
    <input type="text" id="functionExpression" value="y = x + 1" onchange="drawFunction()">
    <p>请选择颜色：</p>
    <input type="color" id="functionColor" value="#ff0000" onchange="drawFunction()">
    <button id="clearButton" onclick="clearFunction()">清空</button>
    <button id="saveButton" onclick="saveFunction()">生成图片</button>
</div>
<script>
    // 获取画布元素
    var canvas = document.getElementById("myChart");
    // 获取画布上下文
    var ctx = canvas.getContext("2d");
    // 创建一个新的Chart对象
    var myChart = new Chart(ctx, {
        type: "scatter", // 设置图表类型为散点图
        data: {
            datasets: [] // 设置数据集为空数组
        },
        options: {
            scales: {
                xAxes: [{ // 设置x轴的属性
                    type: "linear", // 设置x轴为线性刻度
                    position: "bottom", // 设置x轴在底部
                    scaleLabel: { // 设置x轴的标签
                        display: true, // 显示标签
                        labelString: "x" // 标签内容为"x"
                    }
                }],
                yAxes: [{ // 设置y轴的属性
                    type: "linear", // 设置y轴为线性刻度
                    position: "left", // 设置y轴在左侧
                    scaleLabel: { // 设置y轴的标签
                        display: true, // 显示标签
                        labelString: "y" // 标签内容为"y"
                    }
                }]
            },
            legend: { // 设置图例的属性
                display: true, // 显示图例
                position: "top", // 设置图例在顶部
                labels: { // 设置图例标签的属性
                    fontSize: 16, // 设置字体大小为16像素
                    fontColor: "#000000" // 设置字体颜色为黑色
                }
            },
            title: { // 设置标题的属性
                display: true, // 显示标题
                text: "函数图像绘制工具", // 设置标题内容
                fontSize: 24, // 设置字体大小为24像素
                fontColor: "#000000" // 设置字体颜色为黑色
            }
        }
    });

    // 定义一个函数，用于根据函数类型和表达式生成数据点
    function generateDataPoints(functionType, functionExpression) {
        var dataPoints = []; // 创建一个空数组，用于存储数据点
        var xMin = -10; // 设置x轴的最小值为-10
        var xMax = 10; // 设置x轴的最大值为10
        var xStep = 0.1; // 设置x轴的步长为0.1
        for (var x = xMin; x <= xMax; x += xStep) { // 遍历x轴的每个值
            var y = 0; // 初始化y轴的值为0
            if (functionType == "linear") { // 如果函数类型为线性函数
                y = eval(functionExpression.replace("x", x)); // 用eval函数计算表达式的值，替换x为当前的x值
            } else if (functionType == "quadratic") { // 如果函数类型为二次函数
                y = eval(functionExpression.replace("x", x * x)); // 用eval函数计算表达式的值，替换x为当前的x的平方
            } else if (functionType == "sinusoidal") { // 如果函数类型为正弦函数
                y = eval(functionExpression.replace("x", Math.sin(x))); // 用eval函数计算表达式的值，替换x为当前的x的正弦值
            }
            dataPoints.push({x: x, y: y}); // 将当前的数据点添加到数组中
        }
        return dataPoints; // 返回数据点数组
    }

    // 定义一个函数，用于绘制函数图像
    function drawFunction() {
        var functionType = document.getElementById("functionType").value; // 获取用户选择的函数类型
        var functionExpression = document.getElementById("functionExpression").value; // 获取用户输入的函数表达式
        var functionColor = document.getElementById("functionColor").value; // 获取用户选择的颜色
        var dataPoints = generateDataPoints(functionType, functionExpression); // 调用generateDataPoints函数，生成数据点数组
        myChart.data.datasets = []; // 清空已有的数据集
        myChart.data.datasets.push({ // 向图表中添加一个新的数据集
            label: functionExpression, // 设置数据集的标签为函数表达式
            data: dataPoints, // 设置数据集的数据为数据点数组
            borderColor: functionColor, // 设置数据集的边框颜色为用户选择的颜色
            backgroundColor: "rgba(0,0,0,0)", // 设置数据集的背景颜色为透明色
            showLine: true, // 设置显示线条
            fill: false, // 设置不填充区域
            pointRadius: 0, // 设置数据点的半径为0，即不显示数据点
        });
        myChart.update(); // 更新图表显示效果
    }

    // 定义一个函数，用于清空函数图像
    function clearFunction() {
        myChart.data.datasets = []; // 将图表中的数据集设置为空数组，即清空所有数据集
        myChart.update(); // 更新图表显示效果
    }

    // 定义一个函数，用于生成图片并在下方显示
    function saveFunction() {
        var image = canvas.toDataURL("image/png"); // 调用canvas元素的toDataURL方法，将画布内容转换为图片格式，并返回图片的URL地址
        var imageElement = document.createElement("img"); // 创建一个新的img元素，用于显示图片内容
        imageElement.src = image; // 将img元素的src属性设置为图片的URL地址，即显示图片内容
        document.body.appendChild(imageElement); // 将img元素添加到文档中，即在下方显示图片内容
    }
</script>
<div class="alert" role="alert">
    注意：点击函数选项可以隐藏此函数图像！横屏体验更佳！
</div>
</body>
</html>