使用fill()方法

Question

以下是我的JavaScript代码：

function Show(output, startX, startY){
    var c = document.getElementById("myCanvas");
    var context = c.getContext("2d");
        context.arc(startX, startY, 3, 0, Math.PI*2, true);
        context.fill();
        context.arc(startX + 50, startY, 3, 0, Math.PI*2, true);
        context.stroke();
}
Show(outputcpu, 50, 50);
Show(outputio, 70, 50);

我一直期待着这样的事情：o-o o-o。

但不知道为什么我会：o-o-o-o。

如何移除中心笔划？(我想删除第二行o-o*-*o-o)

Answer 1

将分离您的呼叫：http://jsfiddle.net/CmuT7/1

var c = document.getElementById("myCanvas");
var context = c.getContext("2d");

function Show(output, startX, startY) {
    context.beginPath();
    context.arc(startX, startY, 3, 0, Math.PI * 2, true);
    context.fill();
    context.arc(startX + 50, startY, 3, 0, Math.PI * 2, true);
    context.stroke();

}
Show('', 50, 50);
Show('', 70, 70);

Answer 2

您需要使用moveTo()或beginPath()函数来避免这些弧之间的线。

function Show(output, startX, startY){
    var c = document.getElementById("myCanvas");
    var context = c.getContext("2d");
        context.arc(startX, startY, 3, 0, Math.PI*2, true);
        context.fill();
        context.moveTo(startX +50, startY);
        context.arc(startX + 50, startY, 3, 0, Math.PI*2, true);
        context.stroke();
}
Show(outputcpu, 50, 50);
Show(outputio, 70, 50);