html5 canvas線寬空格

Question

我使用html5畫布進行繪畫，如油漆，如果我用較細的畫筆大小進行繪畫，這是一個很好的方法，但如果我增加畫筆大小，我會與空格對齊。

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;
}