Question

我正在尝试使用moveTo和lineTo绘制路径，并且在某些点的顶部我想绘制一个小圆圈，指示xy平面上的点坐标。

到目前为止，我有以下内容：

function draw() 
{ 
var canvas = document.getElementById("canvas"); 
if( canvas == NaN) alert('empty');  
var context = canvas.getContext("2d"); 

context.beginPath(); 
context.strokeStyle= "black"; 
context.lineWidth = 4;

context.moveTo(zx, zy + my); 

    for(var s in resources)
    {
        var array = resources[s];  
        // foreach pair inside a series..
        for(var a in array)
        {
            var x = array[a]; 

            context.strokeStyle="black";    
            context.lineTo(zx + x[0] + 5, zy + my - x[1]);   
            context.stroke(); 
            context.beginPath(); 

            context.strokeStyle="red";  
            context.arc(zx + x[0] + 5, zy + my - x[1], 1, 0, 2*Math.PI, false);     
            context.stroke(); 
            context.closePath();  

        }

    }
}

这导致正确绘制路径，但我只看到最后一个点上的红色圆圈。其他点隐藏在黑色路径下。

Answer 1

我认为在绘制完主体形状后，需要将弧线单独绘制为单独的路径。

在路径上绘制一个圆圈 - HTML 5

1 个答案: