html canvas js画直线图形曲线，并判断画来的是不是直
2018-08-03 本文已影响12人
编程小石头666
用html+canvas+js实现在网页上画直线曲线很容易。但是怎么判断自己画出来的是什么形状呢，比如判断画出来的是不是直线，是不是曲线，是不是三角形。今天就先来讲下：如果判断canvas和js画出来的是不是直线，不多说先看效果图。
图片.gif
下面就来讲下思路
一，首先看下整体实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
background-color: black;
}
canvas {
background-color: white;
}
</style>
<script type="text/javascript">
function atan(x, y) {
return Math.atan(y / x) * 180 / Math.PI;
}
//检测是不是直线
function checkIsLine(pointArray) {
if (pointArray === null || pointArray === undefined || pointArray.length < 3) {
return false;
}
// console.log(pointArray);
var startX = pointArray[0].x;
var startY = pointArray[0].y;
var endX = pointArray[pointArray.length - 1].x;
var endY = pointArray[pointArray.length - 1].y;
var tan = atan(endX - startX, endY - startY);
// console.log("tan" + tan);
for (let i in pointArray) {
// console.log(pointArray[i]);
if (i > 4) {
var tantemp = atan(pointArray[i].x - pointArray[i - 4].x,
pointArray[i].y - pointArray[i - 4].y);
// console.log("tantemp" + tantemp);
if (Math.abs(tantemp - tan) > 16) {
return false;
}
}
}
return true;
}
window.onload = function () {
var oc = document.getElementById('c1');
var ogc = oc.getContext('2d');
oc.onmousedown = function (ev) {
var pointArray = [];
var ev = ev || window.event;
ogc.moveTo(ev.clientX - oc.offsetLeft, ev.clientY - oc.offsetTop);
document.onmousemove = function (ev) {
var point = new Object();
point.x = ev.clientX;
point.y = ev.clientY;
pointArray.push(point);
var ev = ev || window.event;
ogc.lineTo(ev.clientX - oc.offsetLeft, ev.clientY - oc.offsetTop);
ogc.stroke();
};
document.onmouseup = function () {
var isLine = checkIsLine(pointArray);
console.log("是否是直线:" + isLine);
document.onmousemove = null;
document.onmouseup = null;
};
}
}
</script>
</head>
<body>
<canvas id="c1" width="400" height="400">
</canvas>
</body>
</html>
二，重点代码讲解
我们是通过对比临近点直接的正切值（tan值）来看是不是直线的。比如我画条线是有100个点组成的。
通过下面函数求出正切角
//第一个点（x1,y1）和第100个点(x100,y100)
//下面x=x100-x1,y=y100-y1;
function atan(x, y) {
return Math.atan(y / x) * 180 / Math.PI;
}
这样就能求出首尾两点之间的正切值。
然后再遍厉组成直线的100个坐标点。对比相近两个点的正切值是否和首尾求出来的正切值，如果相同或者误差不大。就说明画出来的是个直线了。
//检测是不是直线
function checkIsLine(pointArray) {
if (pointArray === null || pointArray === undefined || pointArray.length < 3) {
return false;
}
// console.log(pointArray);
var startX = pointArray[0].x;
var startY = pointArray[0].y;
var endX = pointArray[pointArray.length - 1].x;
var endY = pointArray[pointArray.length - 1].y;
var tan = atan(endX - startX, endY - startY);
// console.log("tan" + tan);
for (let i in pointArray) {
// console.log(pointArray[i]);
if (i > 4) {//这里相隔4个点比较一次
var tantemp = atan(pointArray[i].x - pointArray[i - 4].x,
pointArray[i].y - pointArray[i - 4].y);
// console.log("tantemp" + tantemp);
if (Math.abs(tantemp - tan) > 16) {//允许误差在16度
return false;
}
}
}
return true;
}
这样就可以判断画出来的是不是直线了。
