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-left: 100px;
}
</style>
<script type="text/javascript">
window.onload = function () {
/*获取元素*/
var myCanvas = document.querySelector('#myCanvas');
/*获取绘图工具*/
var ctx = myCanvas.getContext('2d');
/*
计算坐标系的原点坐标
计算坐标系x轴的最远坐标点以及对应三角形的坐标点
计算坐标系y轴的最远坐标点以及对应三角形的坐标点
*/
// 1. 设置三角形大小以及间隙大小
var arrowSize = 10;
var space = 20;
// 2. 获取Canvas的width、height
var CanvasWidth = ctx.canvas.width;
var CanvasHeight = ctx.canvas.height;
// 3.计算坐标系的原点坐标(x0,y0)
var x0 = space;
var y0 = CanvasHeight - space;
// 4.计算坐标系y轴的最远坐标点(x1,y1)以及对应三角形的坐标点左边(x2,y2)\右边(x3,y3)
var x1 = space;
var y1 = space;
var x2 = Math.floor(x1 - arrowSize/2);
var y2 = Math.floor(y1 + arrowSize);
var x3 = Math.floor(x1 + arrowSize/2);
var y3 = Math.floor(y1 + arrowSize);
// 5.绘画y轴的线条
ctx.beginPath();
ctx.moveTo(x0,y0); // 原点
ctx.lineTo(x1,y1); // y轴最远点
// 6.绘画y轴三角形
ctx.lineTo(x2,y2); // 三角形左边点
ctx.lineTo(x3,y3); // 三角形右边点
ctx.lineTo(x1,y1); // 回到y轴最远点
// 7.填充以及描边y轴
ctx.fill();
ctx.stroke();
// 8.计算坐标系x轴的最远坐标点(x4,y4)以及对应三角形的坐标点上边(x5,y5)\下边(x6,y6)
var x4 = CanvasWidth - space;
var y4 = CanvasHeight - space;
var x5 = Math.floor(x4 - arrowSize);
var y5 = Math.floor(y4 - arrowSize/2);
var x6 = Math.floor(x4 - arrowSize);
var y6 = Math.floor(y4 + arrowSize/2);
// 9.绘制x轴线条
ctx.beginPath();
ctx.moveTo(x0,y0); // 原点
ctx.lineTo(x4,y4); // x轴最远点
// 10.绘制三角形
ctx.lineTo(x5,y5); // 三角形的上边
ctx.lineTo(x6,y6); // 三角形的下边
ctx.lineTo(x4,y4); // 回到x轴最远点
// 11.填充以及描边
ctx.fill();
ctx.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>浏览器显示如下：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录