CANVAS - JS - 圆润而平滑的路径

Question

我正在使用html和js / jquery开发一个画布应用程序。 但是我的路径有问题，它不是圆形的，太多的混叠。 这是小提琴，所以你可以理解我的问题。在代码之后。

fiddle

var $canvas = $("#mainCanvas");
var context = $canvas[0].getContext("2d");
/* ------ CANVAS ------ */

//On mouse events on the canvas:
$canvas.mousedown(function(e) {
//On mousedown, storing the starting coordinates and enable the drawing.
lastEvent = e; //saving the starting coordinates
mouseDown = true; //drawing enabled
}).mousemove(function(e) {
//On mousemove draws the path, change the style, stroke the line, update the coordinates.
if (mouseDown) {
context.beginPath(); //begin the path
context.moveTo(lastEvent.offsetX, lastEvent.offsetY); //starting coordinates
context.lineTo(e.offsetX, e.offsetY);
context.lineWidth = $("#thickness").val();
context.strokeStyle = color;  //color of path
context.stroke(); //draw the path
lastEvent = e; //replacing the coordinates
}
}).mouseup(function() {
//On mouseup drawing disabled
mouseDown = false;
}).mouseleave(function(){
//If the mouse leaves the canvas, stop drawing. BUG FIXING
$canvas.mouseup();
});

解决方案

context.lineCap = 'round';

特别感谢Stacey Burns

Answer 1

这来自lineCap属性。将它设置为圆形，您将获得平滑的路径：

context.lineCap = 'round';

fiddle