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

HTML5 专栏收录该内容
6 篇文章 0 订阅

用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/

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值