如何使用bezierCurveTo动态绘制曲线

how to draw a curve using bezierCurveTo dynamically?

本文关键字：绘制曲线动态 bezierCurveTo 何使用更新时间：2023-09-26

我卡在点上了。我想要的是在鼠标移动时画一条曲线(像头发一样弯曲)。这是我的代码。现在我只能画一条直线，我不知道问题在哪里，但我想这可能是关于函数调用。欢迎任何帮助!!

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

common.js

//变量获取鼠标位置Var x1= 0，日元= 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;
    }

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

在您的代码中进行此更改。目前，您正在调用加载函数，这显然与您的动态要求相冲突。

After:

context.stroke();

添加

context.closePath();