程序博客网 > 怎么屏蔽网络监控

JS画线

来源：互联网发布：怎么屏蔽网络监控编辑：程序博客网时间：2024/04/28 10:33

用Javascript画线

用Javascript画线的方法很多，有SVG，VML、canvas等，但是在现阶段，貌似这些方法都不能兼容所有浏览器。所以我还是用最原始的办法法写了一个画线方法。思路也很简单，就是用一个像素的DIV拼成一条线。

Js代码：

function line(startX, startY, endX, endY, container) {
    if (startX == endX) {
        if (startY > endY) {
            var tempY = startY;
            startY = endY;
            endY = tempY;
        }
        for (var k = startY; k < endY; k++) {
            createPoint(container, startX, k);
        }
    }
    // y = ax + b
    var a = (startY - endY) / (startX - endX);
    var b = startY - ((startY - endY) / (startX - endX)) * startX;
    if (Math.abs(startX - endX) > Math.abs(startY - endY)) {
        if (startX > endX) {
            var tempX = endX;
            endX = startX;
            startX = tempX;
        }
        var left = container.style.left;
        var top = container.style.top;
        for (var i = startX; i <= endX; i++) {
            createPoint(container, i, a * i + b);
        }
    } else {
        if (startY > endY) {
            var tempY = startY;
            startY = endY;
            endY = tempY;
        }
        for (var j = startY; j <= endY; j++) {
            createPoint(container, (j - b) / a, j);
        }
    }

}

function createPoint(container, x, y) {
    var node = document.createElement(div);
    node.className = line;
    node.style.marginTop = y;
    node.style.marginLeft = x;
    container.appendChild(node);
}

当然还需要一段CSS来控制样式：
Css代码
div.line {
    position:absolute;
    z-index:2;
    width:1px;
    height:1px;
    font-size:1px;
    background-color:#0000FF;
    overflow:hidden;
}

来一段HTML测试一下

<html>
<head>
<script type="text/javascript" src="../js/jsline.js"></script>
<script type="text/javascript">
function testLine() {
    line(1, 2, 88, 88, document.getElementById(container));
}
</script>
</head>
<body>
    <div id="container" style="width:400px;height:400px;border:1px solid #000000;margin-left:50px"></div>
    <input type="button" value="line" onclick="testLine();"></input>
</body>
</html>

0 0

怎么屏蔽网络监控

怎么屏蔽网络监控

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子唐诗山行斧山行中文版免费观看山行诗配画简单又好看古诗山行全文意思釡山行杜甫山行山行杜甫山行杜牧古诗山行山行的古诗怎么写杜牧的山行的意思山行古诗杜牧的山行原文山行诗句古诗山行的意思山行的诗杜牧的山行山行诗山行古诗的意思山行的诗句带拼音山行赏析杜牧山行山行古诗原文山行的诗句鉴山行台山行白云深处有人家出自哪首诗杜牧山行诗杜牧山行游山西村山西大学山西张茂才山西村民生山西app 山西特产山西运城山西医科山西师范山西省山西彩车山西财经