本文介绍如何使用纯JavaScript绘制数学函数图像。通过构建包含画点、画线及常见函数（正弦、余弦、正切、圆、多边形）的Plot对象，利用1px div模拟像素点，由点连成线进而构成面。文章详细说明了原点位置、画笔颜色与粗细等属性的设置方法，旨在帮助开发者理解前端绘图的基本原理。
绘图核心对象与功能概述
绘图核心对象为Plot，该对象封装了JavaScript绘制基础图形元素的功能，包括绘制点、绘制直线，以及绘制正弦（sin）、余弦（cos）、正切（tan）函数图像，同时支持绘制圆形和多边形。
绘图参数配置
用户可自定义配置绘图参数，具体包括设置坐标系原点的位置、指定画笔的颜色以及调整画笔的粗细程度，此外还可设定坐标轴线条的颜色。
实现原理：从点到面
其实现原理相对直观：通过创建长度为1像素、宽度为1像素的div元素来模拟单个像素点，进而将这些点连接成线，由线条组合构成面，从而实现图形渲染。
代码分享目的
此处分享相关代码仅供交流参考，目的是消除JavaScript初学者对前端绘图技术的陌生感，展示其并非神秘不可知。
运行代码示例
<html> <head> <title>JS绘制数学函数图</title> <style type="text/css"> body{ margin: 0px; padding: 0px; } </style> </head> <body> <div id="main" style="border-bottom: solid red 0px; height:100%; width:100%"> </div> </body> </html>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]