使用JavaScript画斜线

window.onload = function () {
            var startY = 0;
            var startX = 0;
            var endX = 0;
            var endY = 0;

            document.onmousedown=function(e){
                var event = event || e;
                 startX = event.clientX;
                 startY = event.clientY;
                 document.onmousemove = function () {
                     document.onmouseup = function (e) {
                         var event = event || e;
                         endX = event.clientX;
                         endY = event.clientY;
                         //鼠标差值
                         var X_num = endX - startX;
                         var Y_num = endY - startY;
                         //画线
                         createLine(startX, startY,X_num, Y_num);
                     }
                 }
            }
           
            function createLine(startX, startY, X_num, Y_num) {
                //1.确定X轴差值
                //2.如果小于20  画5个点
                if (X_num > 0 && X_num < 20) {
                    Line(startX, startY, X_num, Y_num,5)
                }
                //3.如果小于40   画8个点
                if (X_num >=20 && X_num < 40) {
                    Line(startX, startY, X_num, Y_num,8)
                }
                //4.如果小于100  画20个点
                if (X_num >= 40 && X_num < 100) {
                    Line(startX, startY, X_num, Y_num,20)
                }
                //5.如果小于200  画40个点
                if (X_num >=100 && X_num < 200) {
                    Line(startX, startY, X_num, Y_num,40)
                }
                //如果小于400  画60个点
                if (X_num >= 200 && X_num < 400) {
                    Line(startX, startY, X_num, Y_num,60)
                }
                if (X_num >= 400) {
                    Line(startX, startY, X_num, Y_num, 100)
                }
               
            }

            function Line(startX, startY, X_num, Y_num,Num) {
                for (var i = 0; i <= Num; i++) {
                    var newImg = document.createElement("div");
                    newImg.style.height = 2 + "px";
                    newImg.style.width = 2 + "px";
                    newImg.style.left = startX + Math.ceil((i / Num) * X_num) + "px";
                    newImg.style.top = startY + Math.ceil((i / Num) * Y_num) + "px";
                    newImg.style.position = "absolute";
                    newImg.style.backgroundColor = "red";
                    document.body.appendChild(newImg);
                }
            }
        }

     
    </script>

基本思路：利用多个div进行进行拼接

然后根据要线的长度实行点的内插

时间原因，目前只能实现从左到右的画线 只在chrome进行了测试

js关键代码已贴  大神轻喷

本文链接

http://blog.csdn.net/qq_36317662/article/details/79369078