Question

我陷入困境。我想要的是在鼠标移动时绘制一条曲线（像弯曲一样的头发）。这是我的代码。现在我只能绘制直线我不知道问题出在哪里是的，但我想它可能是关于函数调用。欢迎任何帮助!!!

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

Answer 1

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

在您的代码中进行此更改。目前，您在加载时调用您的函数，这显然会影响您对动态主义的要求。希望这有助于!!!干杯。

Answer 2

后：

context.stroke();

添加

context.closePath();

如何动态地使用bezierCurveTo绘制曲线？

2 个答案: