how to draw a curve using bezierCurveTo dynamically?

问题

I am stuck at point.what I want is to draw a curve on mouse move(hair like bend).here is my code.Right now I am just able to draw a straight line I don`t know where the problem is,but i guess it might be regarding function calling.any help is welcome!!!

    <html>
    <body>
    <canvas id="myCanvas" width="500" height="800"></canvas>
<script src="common.js"></script>
    </body>
    </html>

common.js

//variables to get the mouse position var x1= 0, y1= 0, x2= 0, y2=0;

    // co-ordinates of bezierCurveTo()
    var sx=250;//for moveTo(x-cordinate)
    var sy=450;//for moveTo(y-cordinate)

//control point1 and control point 2
    var cp1x=250;
    var cp1y=400;
    var cp2x=250;
    var cp2y=300;
//end cordinates
    var endx=250;
    var endy=50;

    ////////////////////////////////////////////////////////////////////////////

    window.addEventListener("load",init,false);

    //to draw a straight line.variables declared globally above

    function init(){
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
       canvas.addEventListener("mouseover",get_xy_over,false);
       canvas.addEventListener("mousemove",get_xy_move,false);
        context.beginPath();
        context.strokeStyle="green";
        context.lineWidth="10";
        context.moveTo(sx,sy);
        context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,endx,endy);
        context.stroke();
    }

    ////////////////////////////////////////////////////////////////
    function get_xy_over(event) {
//for getting X,Y coordinates on mouseover
        try
        {
            x1 = event.touches[0].pageX;
            y1 = event.touches[0].pageY;
        }
        catch (error)
        {
            try
            {
                x1 = event.clientX;
                y1 = event.clientY;
            }
            catch (ex)
            {
            }
        }

        try
        {
            event.preventDefault();
        }
        catch (e)
        {
        }
        console.log("Xstart="+x1,"Ystart="+y1)
    }
    ////////////////////////////////////////////////////////////////////////
    function get_xy_move(event) {
    //for getting X,Y coordinates on mousemove
        try
        {
            x2 = event.touches[0].pageX;
            y2 = event.touches[0].pageY;
        }
        catch (error)
        {
            try
            {
                x2 = event.clientX;
                y2 = event.clientY;
            }
            catch (e)
            {
            }
        }

        try
        {
            event.preventDefault();
        }
        catch (e)
        {
        }
        console.log("Xmove="+x2,"Ymove="+y2)
        var drag=x2-x1;
        magic(drag);//this is the function which helps the line to get dynamic.defined below
    }
    /////////////////////////////////////////////////////////////////////////////
    function magic(a){
         var dynamic_sx=0;
         var dynamic_sy=0;
         var dynamic_cp1x=0;
         var dynamic_cp1y=0;
         var dynamic_cp2x=(a/5);
         var dynamic_cp2y=(dynamic_cp2x/5);
         var dynamic_endx=0+(a/5);
         var dynamic_endy=(dynamic_endx/5);

        console.log("look="+a);

         sx=250+dynamic_sx;
         sy=450+dynamic_sy;
         cp1x=250+dynamic_cp1x;
         cp1y=400+dynamic_cp1y;
         cp2x=250+dynamic_cp2x;
         cp2y=300+dynamic_cp2y;
         endx=250+dynamic_endx;
         endy=50+dynamic_endy;
    }

回答1:

window.addEventListener("mousemove",function(){get_xy_move();init()},false);

make this change in your code.Currently you are calling your function on load which obviously conflicts your requirement of dynamicism. Hope this Helps!!!Cheers.