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

beginPath会将您的来电分开：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);

fill（）方法问题

2 个答案: