个人中心
gpt4 book ai didi

html - 通过 HTML5 Canvas 加入圆到线

转载 作者：搜寻专家 更新时间：2023-10-31 23:12:05 24 4
gpt4 key购买 nike

我试图通过线加入每个圆圈，我的最终代码做到了，但它有一些对齐问题，比如:

enter image description here

我用红色圆圈标记了一些连接部分。如您所见，它们没有正确对齐(线没有从圆心出来)。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <canvas id="graph" width="982" height="636" style="width:491px">
        Tarayıcınız Canvas Desteklemiyor !
        </canvas>

        <script type="text/javascript">
        var i = 0;
        var lastCoord = new Array();
        var c=document.getElementById("graph");
        var cxt=c.getContext("2d");

        function getParam(name)
        {
          name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
          var regexS = "[\\?&]" + name + "=([^&#]*)";
          var regex = new RegExp(regexS);
          var results = regex.exec(window.location.href);
          if(results == null)
            return "";
          else
            return decodeURIComponent(results[1].replace(/\+/g, " "));
        }

        function drawCircleAndLine(x, y)
        {           
            cxt.fillStyle="#000000";
            cxt.beginPath();

            if(i == 0) cxt.arc(x, y, 9, 0, Math.PI*2, false);
            else cxt.arc(x, y, 6, 0, Math.PI*2, false);

            cxt.closePath();
            cxt.fill();

            if(i % 4 != 0)
            {
                cxt.lineWidth = 8;

                cxt.lineTo(lastCoord[0], lastCoord[1]);
                cxt.stroke();
            }
            else {
                cxt.moveTo(lastCoord[0], lastCoord[1]);
                cxt.lineTo(lastCoord[0], lastCoord[1]);
                cxt.stroke();
            }

            lastCoord = [x, y];
            i++;

        }

        var coords = {
            0 : {
                0 : {
                        "0" : { "x" : 50, "y" : 580},
                        "1" : { "x" : 50, "y" : 540},
                        "2" : { "x" : 50, "y" : 472},
                        "3" : { "x" : 50, "y" : 430},
                        "4" : { "x" : 50, "y" : 400},
                        "5" : { "x" : 50, "y" : 382},
                        "6" : { "x" : 50, "y" : 340},
                        "7" : { "x" : 50, "y" : 300},
                        "8" : { "x" : 50, "y" : 250},
                        "9" : { "x" : 50, "y" : 205},
                        "10" : { "x" : 50, "y" : 160},
                        "12" : { "x" : 50, "y" : 138},
                        "14" : { "x" : 50, "y" : 110},
                        "15" : { "x" : 50, "y" : 85},
                        "16" : { "x" : 50, "y" : 65},
                        "20" : { "x" : 50, "y" : 40}
                    },

                1 : {
                        "0" : { "x" : 98, "y" : 555},
                        "1" : { "x" : 98, "y" : 493},
                        "2" : { "x" : 98, "y" : 451},
                        ..............
                        "-4" : { "x" : 926, "y" : 356},
                        "-5" : { "x" : 926, "y" : 375},
                        "-6" : { "x" : 926, "y" : 398},
                        "-7" : { "x" : 926, "y" : 428},
                        "-8" : { "x" : 926, "y" : 452},
                        "-9" : { "x" : 926, "y" : 476},
                        "-10" : { "x" : 926, "y" : 500},
                        "-11" : { "x" : 926, "y" : 530},
                        "-12" : { "x" : 926, "y" : 550},
                        "-16" : { "x" : 926, "y" : 588}
                    }
                }
            };

        var bg = new Image();
        bg.src = "images/disc_graph_empty.jpg";
        bg.onload = function() {
            cxt.drawImage(bg, 0, 0);

            try
            {
                drawCircleAndLine(coords[0][0][getParam('d1')]["x"], coords[0][0][getParam('d1')]["y"]);
                drawCircleAndLine(coords[0][2][getParam('d2')]["x"], coords[0][3][getParam('d2')]["y"]);
                drawCircleAndLine(coords[0][2][getParam('d3')]["x"], coords[0][2][getParam('d3')]["y"]);
                drawCircleAndLine(coords[0][3][getParam('d4')]["x"], coords[0][3][getParam('d4')]["y"]);

                drawCircleAndLine(coords[1][0][getParam('d5')]["x"], coords[1][0][getParam('d5')]["y"]);
                drawCircleAndLine(coords[1][4][getParam('d6')]["x"], coords[1][5][getParam('d6')]["y"]);
                drawCircleAndLine(coords[1][2][getParam('d7')]["x"], coords[1][2][getParam('d7')]["y"]);
                drawCircleAndLine(coords[1][3][getParam('d8')]["x"], coords[1][3][getParam('d8')]["y"]);

                drawCircleAndLine(coords[2][0][getParam('d9')]["x"], coords[2][0][getParam('d9')]["y"]);
                drawCircleAndLine(coords[2][6][getParam('d10')]["x"], coords[2][7][getParam('d10')]["y"]);
                drawCircleAndLine(coords[2][2][getParam('d11')]["x"], coords[2][2][getParam('d11')]["y"]);
                drawCircleAndLine(coords[2][3][getParam('d12')]["x"], coords[2][3][getParam('d12')]["y"]);
            }
            catch(err)
            {
                alert('Hata Oluştu !\nBazı noktalar yerleşmemiş olabilir.\n\n\n' + err);
            }
        }
        </script>

    </body>
</html>

所有文件:http://www.2shared.com/file/Uyh2J0Ni/canvas.html

最佳答案

这是对您的代码的主要简化，应该指出问题所在。我将填充设为浅蓝色并将笔划宽度变小，以便您可以看到问题所在。我只是调用了你的函数两次:

drawCircleAndLine(100,100);
drawCircleAndLine(100,200);

您会期望一条直线向下，但显然它不是直线!看这里:

http://jsfiddle.net/24khs/

这是怎么回事:

第一次，只绘制了一个圆心为 100,100 的圆。这个不错

第二次，在 200,200 处绘制了一个圆，然后该点的路径终点是圆的最右边部分(大约为 106,200)。然后，您将绘制一条从 (106,200) 到 (100,100) 的直线。

为了解决这个问题，您可以在 lineTo 之前添加一个命令，一个 moveTo(x, y)，这样您就可以从正确的位置开始该行。看这里:

http://jsfiddle.net/6VfvG/

关于html - 通过 HTML5 Canvas 加入圆到线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7341630/

24 4 0
文章推荐： node.js - 如何在 node.js 中捕获 zlib 错误
文章推荐： php - 我如何从父类的方法中动态更改对象的类？
文章推荐： php - var_export 的替代品
文章推荐： node.js - 在 Sequelize 迁移中定义部分索引？
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com