Canvas绘制坐标系
需求
如果需要绘画一个坐标系，那么该怎么画呢，示例如下：
从图中可以看出如果想要绘制一个坐标系，具体需要做以下步骤：
计算坐标系的原点坐标
计算坐标系x轴的最远坐标点以及对应三角形的坐标点
计算坐标系y轴的最远坐标点以及对应三角形的坐标点
上面是写出了大概的步骤，但是细节该怎么做呢？
计算坐标系的原点坐标的思路
如果要计算坐标系的原点坐标，首先需要这两个基本要素。
从上面的示意图来看，需要这几个基本参数就可以计算出原点坐标。
canvas的高度 CanvasHeight
canvas的宽度 CanvasWidth
坐标系与边界的间隙 space
原点坐标的 x = space
原点坐标的 y = CanvasHeight - space
计算坐标系y轴的最远坐标点以及对应三角形的坐标点
y轴的最远坐标点 ( x = space, y = space )
那么对于三角形好像就没那么好定位点了，下面来看看理解图。
也就是说还需要定义一个三角形的大小值 arrowSize，通过最远点坐标和arrowSize就可以计算出绘画三角形需要的点。
计算坐标系x轴的最远坐标点以及对应三角形的坐标点
x轴的最远坐标点（ x = CanvasWidth - space，y = CanvasHeight - space）
下面来看看三角形的计算示意图，如下：
好了，上面基本讲解了大概的计算思路，下面就要具体实现示例。
绘制坐标系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border: 1px solid #cccccc;
margin-top: 100px;
margin-l
最低0.47元/天 解锁文章
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
