html5帆布线宽空间

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 =“圆形”

更新笔画功能：

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