html5 canvas 行宽空格

Question

我使用 html5 canvas 来像绘画一样绘画我的问题是，如果我使用细小的画笔大小进行绘画，这很好且平滑，但是如果我增加画笔大小，我会得到带有空格的线条。

code: http://jsfiddle.net/L2g43q1g/

细画笔大小结果： http://postimg.org/image/eyxenntth/

大画笔大小结果： http://postimg.org/image/60agxczf9/

Answer 1

我认为你需要颠倒 context.closePath() 和 context.stroke() 的顺序并添加 context.lineJoin = "round"

更新笔划函数：

function stroke(mouseX, mouseY) {
    context.beginPath();
    context.lineJoin = "round";
    context.lineWidth = 10; //1 = thin line without spaces, 10 = big line with spaces..
    context.moveTo(prevMouseX, prevMouseY);
    context.lineTo(mouseX, mouseY);
    context.closePath();
    context.stroke();


    prevMouseX = mouseX;
    prevMouseY = mouseY;
}

html5 canvas 行宽空格

html5 canvas linewidth spaces

html

javascript

canvas

stroke