二次曲线和贝塞尔曲线

最新推荐文章于 2024-08-10 13:56:32 发布

liyankai

最新推荐文章于 2024-08-10 13:56:32 发布

阅读量96

点赞数

分类专栏： HTMl5 JavaScript Canvas

本文链接：https://blog.csdn.net/liyankai/article/details/84380702

版权

JavaScript 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

HTMl5

1 篇文章 0 订阅

订阅专栏

Canvas

1 篇文章 0 订阅

订阅专栏

截图如下，拖动黄色控制点可以改变曲线：

二次曲线代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        var start = { x: 10, y: 150 }, ctl = { x: 100, y: 50 }, end = { x: 200, y: 150 };
        var mouseIndex = -1;
        function draw() {
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.clearRect(0, 0, 600, 500);
            ctx.lineWidth = 1;
            ctx.strokeStyle = "#000000";
            ctx.beginPath();
            //辅助连线
            ctx.moveTo(start.x, start.y);
            ctx.lineTo(ctl.x, ctl.y);
            ctx.lineTo(end.x, end.y);
            ctx.stroke();

            //曲线
            ctx.beginPath();
            ctx.strokeStyle = "#ff0000";
            ctx.lineWidth = 4;
            ctx.moveTo(start.x, start.y);
            ctx.quadraticCurveTo(ctl.x, ctl.y, end.x, end.y);
            ctx.stroke();

            //控制点
            ctx.beginPath();
            ctx.strokeStyle = "#000000";
            ctx.fillStyle = mouseIndex == 0 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
            ctx.lineWidth = 2;
            ctx.arc(start.x, start.y, 7, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.stroke();
            ctx.beginPath();
            ctx.fillStyle = mouseIndex == 1 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
            ctx.arc(ctl.x, ctl.y, 7, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.stroke();
            ctx.beginPath();
            ctx.fillStyle = mouseIndex == 2 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
            ctx.arc(end.x, end.y, 7, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.stroke();
        }
        function getRect(point) {
            return { x: point.x - 8, y: point.y - 8, width: 16, height: 16 };
        }
        function contains(rect, point) {
            return point.x > rect.x && point.x < rect.x + rect.width && point.y > rect.y && point.y < rect.y + rect.height;
        }
        function handleMove(event) {
            if (window.mousedown) {
                if (mouseIndex == 0) {
                    start = { x: event.offsetX, y: event.offsetY };
                } else if (mouseIndex == 1) {
                    ctl = { x: event.offsetX, y: event.offsetY };
                } else if (mouseIndex == 2) {
                    end = { x: event.offsetX, y: event.offsetY };
                }
                draw();
            } else {
                var newMouseIndex = mouseIndex;
                if (contains(getRect(start), { x: event.offsetX, y: event.offsetY })) {
                    newMouseIndex = 0;
                } else if (contains(getRect(ctl), { x: event.offsetX, y: event.offsetY })) {
                    newMouseIndex = 1;
                } else if (contains(getRect(end), { x: event.offsetX, y: event.offsetY })) {
                    newMouseIndex = 2;
                } else {
                    newMouseIndex = -1;
                }
                if (newMouseIndex !== mouseIndex) {
                    mouseIndex = newMouseIndex;
                    draw();
                }
            }
        }
    
    </script>
</head>
<body οnlοad="draw()" οnmοusedοwn="window.mousedown=1" οnmοuseup="window.mousedown=0">
    <canvas id="canvas" width="600" height="500" οnmοusemοve="handleMove(event)"></canvas>
</body>
</html>

贝塞尔曲线：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        var start = { x: 10, y: 150 }, ctl = { x: 100, y: 50 }, ctl2={x:200,y:200},end = { x: 300, y: 150 };
        var mouseIndex = -1;
        function draw() {
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.clearRect(0, 0, 600, 500);
            ctx.lineWidth = 1;
            ctx.strokeStyle = "#000000";
            ctx.beginPath();
            //辅助连线
            ctx.moveTo(start.x, start.y);
            ctx.lineTo(ctl.x, ctl.y);
            ctx.lineTo(ctl2.x, ctl2.y);
            ctx.lineTo(end.x, end.y);
            ctx.stroke();

            //曲线
            ctx.beginPath();
            ctx.strokeStyle = "#ff0000";
            ctx.lineWidth = 4;
            ctx.moveTo(start.x, start.y);
            ctx.bezierCurveTo(ctl.x, ctl.y, ctl2.x,ctl2.y,end.x, end.y);
            ctx.stroke();

            //控制点
            ctx.beginPath();
            ctx.strokeStyle = "#000000";
            ctx.fillStyle = mouseIndex == 0 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
            ctx.lineWidth = 2;
            ctx.arc(start.x, start.y, 7, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.stroke();
            ctx.beginPath();
            ctx.fillStyle = mouseIndex == 1 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
            ctx.arc(ctl.x, ctl.y, 7, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.stroke();
            ctx.beginPath();
            ctx.fillStyle = mouseIndex == 2 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
            ctx.arc(ctl2.x, ctl2.y, 7, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.stroke();
            ctx.beginPath();
            ctx.fillStyle = mouseIndex == 3 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
            ctx.arc(end.x, end.y, 7, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.stroke();
        }
        function getRect(point) {
            return { x: point.x - 8, y: point.y - 8, width: 16, height: 16 };
        }
        function contains(rect, point) {
            return point.x > rect.x && point.x < rect.x + rect.width && point.y > rect.y && point.y < rect.y + rect.height;
        }
        function handleMove(event) {
            if (window.mousedown) {
                if (mouseIndex == 0) {
                    start = { x: event.offsetX, y: event.offsetY };
                } else if (mouseIndex == 1) {
                    ctl = { x: event.offsetX, y: event.offsetY };
                } else if (mouseIndex == 2) {
                    ctl2 = { x: event.offsetX, y: event.offsetY };
                }else if (mouseIndex == 3) {
                    end = { x: event.offsetX, y: event.offsetY };
                }
                draw();
            } else {
                var newMouseIndex = mouseIndex;
                if (contains(getRect(start), { x: event.offsetX, y: event.offsetY })) {
                    newMouseIndex = 0;
                } else if (contains(getRect(ctl), { x: event.offsetX, y: event.offsetY })) {
                    newMouseIndex = 1;
                } else if (contains(getRect(ctl2), { x: event.offsetX, y: event.offsetY })) {
                    newMouseIndex = 2;
                } else if (contains(getRect(end), { x: event.offsetX, y: event.offsetY })) {
                    newMouseIndex = 3;
                }else {
                    newMouseIndex = -1;
                }
                if (newMouseIndex !== mouseIndex) {
                    mouseIndex = newMouseIndex;
                    draw();
                }
            }
        }
    
    </script>
</head>
<body οnlοad="draw()" οnmοusedοwn="window.mousedown=1" οnmοuseup="window.mousedown=0">
    <canvas id="canvas" width="600" height="500" οnmοusemοve="handleMove(event)"></canvas>
</body>
</html>