HTML中使用canvas绘制点和线

最新推荐文章于 2024-06-05 14:45:33 发布

liberty888

最新推荐文章于 2024-06-05 14:45:33 发布

阅读量924

点赞数

分类专栏：逆向工具逆向文章标签：爬虫

本文链接：https://blog.csdn.net/liberty888/article/details/131833589

版权

逆向同时被 2 个专栏收录

65 篇文章 30 订阅

订阅专栏

逆向工具

29 篇文章 1 订阅

订阅专栏

有时在生成轨迹后，想看下自己生成的轨迹图形和线上的轨迹是否差不多，这时候就可以使用canvas在页面中根据轨迹画出轨迹，代码如下。

<html>
    <!--Canvas 的宽高要在页面中设置，css 或 js 中设置的宽高不正常-->
    <body>
        <canvas id="canvas" width="500" height="500">
                <%--浏览器不支持canvas 标签--%>
        </canvas>
    </body>
</html>

<script>

function getCTX() {
    let c = document.getElementById("canvas");
    let ctx = c.getContext("2d");
    ctx.clearRect(0,0,c.width,c.height);
    return ctx;
}
let ctx = getCTX();

function drawPoint(point,color) {
    // 获取画笔
    // 设置绘制颜色
    ctx.fillStyle =color;
    // 绘制成矩形
    ctx.fillRect(point.x - 2, point.y - 2, 4, 4);
    
    // 设置字体样式
    ctx.font = "16px bold 宋体";
    // 绘制文字
   // ctx.fillText("(" + point.x + ", " + point.y + ")", point.x, point.y);
   ctx.fillText("", point.x, point.y);
}
function drawPath(path){
    ctx.beginPath();

    //如果颜色需要变更，必须先开始新的路径，否则全部的线颜色由最后一次设置的颜色决定
    ctx.strokeStyle = "#0000FF";
    for(var i = 0; i < path.length - 1; i++){
        drawLine(ctx, points[path[i]], points[path[i+1]]);
    }
}
/**
 * 画线
 */
function drawLine(ctx, a, b){
    ctx.moveTo(a.x, a.y);
    ctx.lineTo(b.x, b.y);
    ctx.stroke();
}

//drawPoint({x:300,y:300});

//93,92|112,92

function drawMoreTrace(traceStr,color){
    var arr = traceStr.split('|');
    for(var i=0;i<arr.length;i++){
        var str = arr[i];
        var marr = str.split(',');
        var po = {};
        po.x = marr[0];
        po.y = marr[1];
        drawPoint(po,color);
    }
}

function drawMorePoint(pointStr){
    var arr = pointStr.split('|');
    for(var i=0;i<arr.length;i++){
        var str = arr[i];
        var marr = str.split(',');
        var po = {};
        po.x = marr[0];
        po.y = marr[1];
        
        if(i == 0){
            drawPoint(po,"red");
        }

        if(i == 1){
            drawPoint(po,"black");
        }
        if(i == 2){
            drawPoint(po,"green");
        }
    }
}

var traceStr = '183,54,682|183,57,688|178,61,697|175,64,704|173,67,713|171,69,720|167,71,729|167,72,736|165,74,744|163,75,752|161,77,761|159,78,768|156,81,777|155,82,784|153,83,792|151,84,800|150,84,808|148,85,816|145,86,823|143,87,832|140,87,840|136,87,848|135,89,856|131,90,864|128,91,872|127,93,880|123,94,888|122,95,896|119,95,905|117,95,912|115,97,920|114,97,928|112,98,936|111,98,944|111,99,960|110,99,968|107,99,978|104,101,1000|103,101,1010|102,102,1016|99,102,1025|97,103,1040|96,103,1048|95,103,1057|93,104,1149|92,104,1163|91,105,1169|91,106,1185|91,107,1201|89,108,1233|88,109,1249|87,110,1278|89,110,1745|90,109,1752|94,108,1760|98,107,1769|103,107,1776|107,106,1785|113,106,1792|119,103,1800|128,103,1808|135,103,1816|141,103,1825|144,103,1833|149,103,1841|153,103,1849|156,103,1856|159,103,1864|162,103,1872|164,103,1881|167,103,1888|171,103,1897|174,102,1905|176,102,1913|180,102,1920|187,100,1936|190,100,1936|195,99,1947|202,98,1951|205,98,1962|208,96,1968|211,96,1976|213,96,1984|214,96,1994|215,96,2000|216,96,2113|217,96,2121|218,96,2137|219,96,2145|220,96,2153|223,96,2161|224,96,2170|225,96,2177|226,96,2185|227,96,2220|228,96,2246|229,96,2257|230,96,2265|231,96,2276|232,96,2323|233,96,2329|235,96,2345|236,96,2386|237,96,2409|238,97,2417|239,97,2433|240,98,2465';
drawMoreTrace(traceStr,"#0000FF");

var pointStr = '182,54,21|87,110,1560|240,98,2920';
drawMorePoint(pointStr);

</script>