canvas绘制贝塞尔曲线

最新推荐文章于 2024-06-24 16:44:45 发布

原创最新推荐文章于 2024-06-24 16:44:45 发布 · 342 阅读

1 ·

CC 4.0 BY-SA版权

H5 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用HTML5 canvas实现的可交互贝塞尔曲线绘制方法，用户可以通过拖动控制点来实时调整曲线形状，适用于前端图形界面的动态效果设计。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        canvas{
            position:absolute;
            background: #fff;
        }
        div{
            width:500px;
            height:500px;
            position: relative;
        }
      
    </style>
</head>
<body>
    <div>
        <canvas id="canvas" width="500" height="500"></canvas>
    </div>
    <script>

        let canvas  = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        const pos1 = [];
        const pos2 = [];

        init();//初始化画布

        function init(){//初始化画布
            ctx.font = "24px serif";
            ctx.fillText('拉动两个控制点，改变曲线的形状',50,50);
           
            /* 曲线的两个端点 */
            ctx.beginPath();
            ctx.arc(300,300,10,0,Math.PI*2);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(100,100,10,0,Math.PI*2);
            ctx.fill();
    
    
            /* 控制点一 */
            ctx.beginPath();
            ctx.moveTo(100,100);
            ctx.lineTo(200,100);
            ctx.stroke();
            ctx.beginPath();
            let pos1x = 200;
            let pos1y = 100;
            ctx.arc(pos1x,pos1y,10,0,Math.PI*2);
            ctx.fill();
            pos1.push({pos1x,pos1y});
    
    
            /* 控制点二 */
            ctx.beginPath();
            let pos2x = 200;
            let pos2y = 300;
            ctx.arc(200,300,10,0,Math.PI*2);
            pos2.push({pos2x,pos2y});
            ctx.fill();
            ctx.beginPath();
            ctx.moveTo(300,300);
            ctx.lineTo(200,300);
            ctx.stroke();
    
            /* 曲线 */
            ctx.beginPath();
            ctx.moveTo(100,100);
            ctx.bezierCurveTo(pos1[0].pos1x,pos1[0].pos1y,pos2[0].pos2x,pos2[0].pos2y,300,300);
            ctx.stroke();
            ctx.font='24px serif';
            ctx.fillText('('+pos1[0].pos1x+','+pos1[0].pos1y+'),('+pos2[0].pos2x+','+pos2[0].pos2y+')',100,450);
        }


        /* 移动控制点 */

        let div = document.querySelector('div');
        div.onmousedown = function(ev){
           /*  console.log(ev.pageX,ev.pageY);
            console.log(pos1[0].pos1x-5,pos1[0].pos1x+5);
            console.log(pos1[0].pos1y-5,pos1[0].pos1y+5); */
            if((ev.pageX>= pos1[0].pos1x-5 && ev.pageX<= pos1[0].pos1x+5) && (ev.pageY >= pos1[0].pos1y-5 && ev.pageY <= pos1[0].pos1y+5)){
                document.onmousemove = function(ev){
                    pos1[0] = {pos1x:ev.pageX,pos1y:ev.pageY};
                    review();
                }
                document.onmouseup = function(ev){
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            }
            if((ev.pageX>= pos2[0].pos2x-5 && ev.pageX<= pos2[0].pos2x+5) && (ev.pageY >= pos2[0].pos2y-5 && ev.pageY <= pos2[0].pos2y+5)){
                document.onmousemove = function(ev){
                    pos2[0] = {pos2x:ev.pageX,pos2y:ev.pageY};
                    review();
                }
                document.onmouseup = function(ev){
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            }
           
        }


        /* 移动后更新画布 */
        function review(){
            ctx.clearRect(0,0,500,500);
            ctx.font='24px serif';
            ctx.fillText('拉动两个红色的点，改变曲线的形状',50,50);
            ctx.moveTo(100,100);
            ctx.bezierCurveTo(pos1[0].pos1x, pos1[0].pos1y, pos2[0].pos2x, pos2[0].pos2y, 300,300);
            ctx.stroke();

            ctx.beginPath();
            ctx.arc(300,300,10,0,Math.PI*2);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(100,100,10,0,Math.PI*2);
            ctx.fill();

            ctx.beginPath();
            ctx.moveTo(100,100);
            ctx.lineTo(pos1[0].pos1x,pos1[0].pos1y);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(pos1[0].pos1x,pos1[0].pos1y,10,0,Math.PI*2);
            ctx.fill();

            ctx.beginPath();
            ctx.arc(pos2[0].pos2x,pos2[0].pos2y,10,0,Math.PI*2);
            ctx.fill();
            ctx.beginPath();
            ctx.moveTo(300,300);
            ctx.lineTo(pos2[0].pos2x,pos2[0].pos2y);
            ctx.stroke();
            ctx.font='24px serif';
            ctx.fillText('('+pos1[0].pos1x+','+pos1[0].pos1y+'),('+pos2[0].pos2x+','+pos2[0].pos2y+')',100,450);
        }
        </script>
</body>
</html>