0

我被困在了点。我想要的是在鼠标移动时画一条曲线（头发像弯曲）。这是我的代码。现在我只能画一条直线我不知道问题出在哪里，但是我想这可能与函数调用有关。欢迎任何帮助！！！

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

common.js

//获取鼠标位置的变量 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;
    }
4

2 回答 2

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

在您的代码中进行此更改。目前您正在加载您的函数，这显然与您对动态性的要求相冲突。希望这有帮助！！！干杯。

于 2013-06-08T12:53:11.530 回答
0

后：

context.stroke();

添加

context.closePath();
于 2013-05-27T13:26:34.410 回答