我使用以下代码着色画布。但绘制的线条并不平滑。在边缘,它更像是盒子而不是光滑的边缘。我怎样才能让它流畅逼真?
function touchStartHandler(e) {
var touch = e.changedTouches[0];
drawPath[touch.identifier] = touch;
context.fillStyle = strokeColor;
context.beginPath();
context.arc(drawPath[touch.identifier].pageX - content.offsetLeft,
drawPath[touch.identifier].pageY - content.offsetTop,
strokeWidth / 2, 0, Math.PI * 2, true);
context.closePath();
context.fill();
}
function touchMoveHandler(e) {
var touches = e.changedTouches, touchesLength = touches.length, currentDrawPath = null, i = 0;
context.lineWidth = strokeWidth;
context.strokeStyle = strokeColor;
context.lineJoin = 'round';
for (i = 0; i < touchesLength; i += 1) {
currentDrawPath = drawPath[touches[i].identifier];
if (currentDrawPath !== undefined) {
context.beginPath();
context.moveTo(currentDrawPath.pageX - content.offsetLeft,
currentDrawPath.pageY - content.offsetTop);
context.lineTo(touches[i].pageX - content.offsetLeft,
touches[i].pageY - content.offsetTop);
context.closePath();
context.stroke();
drawPath[touches[i].identifier] = touches[i];
}
}
e.preventDefault();
}
function touchEndHandler(e) {
var touch = e.changedTouches[0];
xposition = drawPath[touch.identifier].pageX;
delete drawPath[touch.identifier];
}`
提前谢谢!