如何使画布绘画流畅逼真

时间:2016-09-19 12:46:24

标签: javascript html5

我使用以下代码着色画布。但绘制的线条并不平滑。在边缘,它更像是盒子而不是光滑的边缘。我怎样才能让它流畅逼真?

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


提前谢谢!

0 个答案:

没有答案