2

我正在尝试使用 HTML5 画布元素绘制图表。该图由顶点和连接这些顶点的边组成。我用小圆圈表示顶点，用连​​接圆圈的线表示边缘。

在我的项目中，我想在按下“下一步”按钮时更改顶点的位置。下图是页面首次加载时画布的状态：

在此处输入图像描述

单击“下一步”按钮时，将根据顶点的新坐标重新绘制图形。但是，渲染似乎有错误，如下所示：

在此处输入图像描述

奇怪的是，我没有在任何地方使用 fill() 函数，所以我无法理解为什么要填充部分。以下是用于绘制图形的 draw() 函数的代码：

function draw(position)
{
    var canvas_elem = document.getElementById('drawing');

    // Check the element is in the DOM and the browser supports canvas
    if(canvas_elem.getContext)
    {
        // Initaliase a 2-dimensional drawing context
        var canvas = canvas_elem.getContext('2d');

        // Clear canvas
        canvas.clearRect(0, 0, canvas_elem.width, canvas_elem.height);

        var data = data_array[num_vertices+1+position].split(",");

        // Draw all vertices
        for( var i=0; i<num_vertices; i++)
        {
            canvas.arc(data[2*i], data[2*i+1], radius, 0, 2 * Math.PI, false);
            canvas.fillStyle = 'black';
            canvas.fill();
        }

        // Connect vertices by lines according to adjacency matrix
        for(var i=0;i<num_vertices; i++)
        {
            for(var j=i; j<num_vertices; j++)
            {
                if(adjacency[i][j]==1)
                {
                    canvas.beginPath();
                    canvas.moveTo(data[2*i],data[2*i+1]);
                    canvas.lineTo(data[2*j],data[2*j+1]);
                    canvas.stroke();
                }
            }
        }
    }
    else
    {
        alert("Please use an HTML5 compatible browser.");
    }
}

关于这里可能发生的事情的任何线索？

取这些变量的以下值进行调试：

data_array=[
"10",
"0,1,1,0,0,0,0,0,0,0",
"1,0,0,1,0,0,0,0,0,1",
"1,0,0,0,1,0,0,0,0,1",
"0,1,0,0,0,1,0,0,1,1",
"0,0,1,0,0,0,1,0,1,1",
"0,0,0,1,0,0,0,1,1,0",
"0,0,0,0,1,0,0,1,1,0",
"0,0,0,0,0,1,1,0,0,0",
"0,0,0,1,1,1,1,0,0,0",
"0,1,1,1,1,0,0,0,0,0",
"10,2,35.4,23.3,88.9,100,210,350,70,500,412,208,336,112,45,32,89,92,102,23",
"30,4,19.4,35.3,80.9,90,230,310,120,440,400,220,330,105,40,29,80,89,90,18"
]

num_vertices=10
4

2 回答 2

0

该.arc()方法向当前路径添加点，该.fill()方法填充当前路径。如果您继续调用.arc()，则您将重复使用相同的路径，因此最终会被填满。使用以下命令开始新路径.beginPath()：

// Draw all vertices
for( var i=0; i<num_vertices; i++)
{
    canvas.beginPath();
    canvas.arc(data[2*i], data[2*i+1], radius, 0, 2 * Math.PI, false);
    canvas.fill();
}

http://jsfiddle.net/PAPr5/2/

或者，使用.moveTo(). 这让您只需一次调用即可绘制所有点.fill()。

// Draw all vertices
for (var i = 0; i < num_vertices; i++) {
    var x = data[2 * i];
    var y = data[2 * i + 1]
    canvas.moveTo(x, y);
    canvas.arc(x, y, radius, 0, 2 * Math.PI, false);
}
canvas.fill();

http://jsfiddle.net/PAPr5/5/

根据规范，.arc()不应创建新路径或子路径。Google Chrome 中的实现.arc()不符合规范。在 Chrome 中，每次调用都会.arc()创建一个新的子路径。这种行为是非标准的。

于 2013-04-24T18:36:26.170 回答
0

好吧，一个愚蠢的错误。画完每条线后我忘记调用 closePath() 了。

于 2013-04-24T18:49:20.470 回答