html canvas js画直线图形曲线，并判断画来的是不是直线

用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;        }

这样就可以判断画出来的是不是直线了。

关于我：http://30paotui.com:9000/

文章转载于:https://www.jianshu.com/p/2d35fbc58397

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《html canvas js画直线图形曲线，并判断画来的是不是直线》