Question

我想通过线路加入每个圈子，我的最终代码会这样做，但它有一些像这样的对齐问题：

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

Answer 1

以下是代码的主要简化，应指出问题所在。我将填充浅蓝色和笔划宽度设置得更小，以便您可以看到问题。我只是两次调用你的函数：

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

你会期望一条直线向下，但很明显它不会直线下降！见这里：

http://jsfiddle.net/24khs/

这是怎么回事：

第一次，正在绘制一个圆圈，中心位于100,100。这很好

第二次，在200,200处绘制一个圆，然后在该点的路径末端是圆的最右边部分（大约是106,200）。然后，您将从（106,200）到（100,100）绘制一条线。

要解决此问题，您可以在moveTo(x, y)之前添加一个lineTo命令，以便从正确的位置开始行。见这里：

http://jsfiddle.net/6VfvG/

Circle To Line通过HTML5 Canvas加入

1 个答案: