jquery - 如何在画布上绘制时包含贝塞尔曲线

Question

我有一个可以在画布元素上绘制的插件。但是因为我对画布元素的功能部分不熟悉。我想知道我应该在哪里编写贝塞尔曲线方法来改进画布上绘制的曲线。这是示例代码：

jQuery( window ).load(function(){
            setTimeout(
                function(){
                    window.scrollTo( 0, 0 );
                },
                100
            );
        }
    );


    // When The DOM loads, initialize the scripts.
    jQuery(function( $ ){



    var restorePoints = [];
    var canvas = $( "canvas" );
    var a=false;
    var b,c="";
    var d=document.getElementById("can");
    var e=d.getContext("2d");
    e.strokeStyle="black";
    e.lineWidth=3;
    e.lineCap="round";
    e.fillStyle="rgba(0, 0, 200, 0)";
    e.fillRect(0,0,d.width,d.height);
    $("#bsz").change(function(a){e.lineWidth=this.value; });
    $("#bcl").change(function(a){e.strokeStyle=this.value; window.location.hash = '#';});


        //$("#can").mousedown(function(d){saveRestorePoint();a=true;e.save();b=d.pageX-this.offsetLeft;c=d.pageY-this.offsetTop});


        $(document).click(function(){a=false});

        var isIPhone = (new RegExp( "iPhone", "i" )).test(
            navigator.userAgent
        );

        var getCanvasLocalCoordinates = function( pageX, pageY ){
            var position = canvas.offset();

            return({
                x: (pageX - position.left),
                y: (pageY - position.top)
            });
        };

        var getTouchEvent = function( event ){
            return(
                isIPhone ?
                    window.event.targetTouches[ 0 ] :
                    event
            );
        };


        var onTouchStart = function( event ){

            window.location.hash = '#';


            var touch = getTouchEvent( event );
            var localPosition = getCanvasLocalCoordinates(
                touch.pageX,
                touch.pageY
            );

            saveRestorePoint();
            a=true;
            e.save();
            b=localPosition.x;
            c=localPosition.y;


            if(a==true){
            e.beginPath();
            e.moveTo(localPosition.x,localPosition.y);
            e.lineTo(localPosition.x+1,localPosition.y+1);
            e.stroke();
            e.closePath();
            b=localPosition.x;
            c=localPosition.y;
            }

            lastPenPoint = {
                x: localPosition.x,
                y: localPosition.y
            };

            canvas.bind(
                (isIPhone ? "touchmove" : "mousemove"),
                onTouchMove
            );

            canvas.bind(
                (isIPhone ? "touchend" : "mouseup"),
                onTouchEnd
            );
        };


        var OnClick = function( event ){
            var touch = getTouchEvent( event );
            var localPosition = getCanvasLocalCoordinates(
                touch.pageX,
                touch.pageY
            );

            lastPenPoint = {
                x: localPosition.x,
                y: localPosition.y
            };

            if(a==true){
            e.beginPath();
            e.moveTo(localPosition.x,localPosition.y);
            e.lineTo(localPosition.x+1,localPosition.y+1);
            e.stroke();
            e.closePath();
            b=localPosition.x;
            c=localPosition.y;
            }


        };


        var onTouchMove = function( event ){
            var touch = getTouchEvent( event );
            var localPosition = getCanvasLocalCoordinates(
                touch.pageX,
                touch.pageY
            );

            lastPenPoint = {
                x: localPosition.x,
                y: localPosition.y
            };

            if(a==true){
            e.beginPath();
            e.moveTo(localPosition.x,localPosition.y);
            e.lineTo(b,c);
            e.stroke();
            e.closePath();
            b=localPosition.x;
            c=localPosition.y;
            }


        };

        var onTouchEnd = function( event ){
            canvas.unbind(
                (isIPhone ? "touchmove" : "mousemove")
            );

            canvas.unbind(
                (isIPhone ? "touchend" : "mouseup")
            );
        };


        canvas.bind(
            (isIPhone ? "touchstart" : "mousedown"),
            function( event ){
                onTouchStart( event );
                return( false );
            });