HTML中使用canvas绘制点和线

喜欢ヅ旅行 2023-10-13 21:01 10阅读 0赞

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

<html>
        
        <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>