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