canvas 将折线转换成曲线

最新推荐文章于 2024-09-08 21:38:01 发布

转载最新推荐文章于 2024-09-08 21:38:01 发布 · 2.5k 阅读

html5 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一种使用canvas2d API绘制平滑曲线的方法，通过计算路径上各点间的贝塞尔控制点来实现曲线的平滑过渡。代码示例展示了如何定义Vector2类以及如何利用该类实现曲线绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现原理

依靠canvas 2d的api方法context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);来实现绘制曲线。

实现目标

这里写图片描述

具体过程

这里写图片描述

代码

Vector2，一般用来表示向量，但有的时候也用来当作点来进行一计算。

var Vector2 = function(x, y) {
        this.x = x;
        this.y = y;
}
Vector2.prototype = {
    "length": function () {
        return Math.sqrt(this.x * this.x + this.y * this.y);
    },
    "normalize": function () {
        var inv = 1 / this.length();
        return new Vector2(this.x * inv, this.y * inv);
    },
    "add": function (v) {
        return new Vector2(this.x + v.x, this.y + v.y);
    },
    "multiply": function (f) {
        return new Vector2(this.x * f, this.y * f);
    },
    "dot": function (v) {
        return this.x * v.x + this.y * v.y;
    },
    "angle": function (v) {
        return Math.acos(this.dot(v) / (this.length() *v.length())) * 180 / Math.PI;
    }
}

length求向量长度
normalize转单位向量
add向量叠加
multiply向量翻倍
dot内积
angle方法用来求两个向量的夹角

核心方法根据path上的点，求出所有贝塞尔曲线控制点。

function getControlPoint(path) {
    var rt = 0.3;
    var i = 0, count = path.length - 2;
    var arr = [];
    for (; i < count; i++) {
        var a = path[i], b = path[i + 1], c = path[i + 2];
        var v1 = new Vector2(a.x - b.x, a.y - b.y);
        var v2 = new Vector2(c.x - b.x, c.y - b.y);
        var v1Len = v1.length(), v2Len = v2.length();
        var centerV = v1.normalize().add(v2.normalize()).normalize();
        var ncp1 = new Vector2(centerV.y, centerV.x * -1);
        var ncp2 = new Vector2(centerV.y * -1, centerV.x);
        if (ncp1.angle(v1) < 90) {
            var p1 = ncp1.multiply(v1Len * rt).add(b);
            var p2 = ncp2.multiply(v2Len * rt).add(b);
            arr.push(p1, p2)
        } else {
            var p1 = ncp1.multiply(v2Len * rt).add(b);
            var p2 = ncp2.multiply(v1Len * rt).add(b);
            arr.push(p2, p1)
        }
    }
    return arr;
}

案例

这里写图片描述
代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="c" width="1000" height="800"></canvas>

<script>
    var ctx=document.getElementById("c").getContext("2d");
    var points =[{ x: 50, y: 50 }, { x: 200, y: 100 }, { x: 250, y: 50 }, { x: 350, y: 150 }, { x: 370, y: 100 }, { x: 570, y: 200 }];
    ctx.lineWidth=3;
    ctx.strokeStyle="#cccccc";
    drawPath(points,ctx);

    function drawPath(path,ctx){
        var Vector2 = function(x, y) {
            this.x = x;
            this.y = y;
        };
        Vector2.prototype = {
            "length": function () {
                return Math.sqrt(this.x * this.x + this.y * this.y);
            },
            "normalize": function () {
                var inv = 1 / this.length();
                return new Vector2(this.x * inv, this.y * inv);
            },
            "add": function (v) {
                return new Vector2(this.x + v.x, this.y + v.y);
            },
            "multiply": function (f) {
                return new Vector2(this.x * f, this.y * f);
            },
            "dot": function (v) {
                return this.x * v.x + this.y * v.y;
            },
            "angle": function (v) {
                return Math.acos(this.dot(v) / (this.length() *v.length())) * 180 / Math.PI;
            }
        };
        function getControlPoint(path) {
            var rt = 0.3;
            var i = 0, count = path.length - 2;
            var arr = [];
            for (; i < count; i++) {
                var a = path[i], b = path[i + 1], c = path[i + 2];
                var v1 = new Vector2(a.x - b.x, a.y - b.y);
                var v2 = new Vector2(c.x - b.x, c.y - b.y);
                var v1Len = v1.length(), v2Len = v2.length();
                var centerV = v1.normalize().add(v2.normalize()).normalize();
                var ncp1 = new Vector2(centerV.y, centerV.x * -1);
                var ncp2 = new Vector2(centerV.y * -1, centerV.x);
                if (ncp1.angle(v1) < 90) {
                    var p1 = ncp1.multiply(v1Len * rt).add(b);
                    var p2 = ncp2.multiply(v2Len * rt).add(b);
                    arr.push(p1, p2)
                }
                else {
                    var p1 = ncp1.multiply(v2Len * rt).add(b);
                    var p2 = ncp2.multiply(v1Len * rt).add(b);
                    arr.push(p2, p1)
                }
            }
            return arr;
        }

        var point=getControlPoint(path);
        console.log(point);
        var points = path;
        ctx.beginPath();
        var int=0;
        for(var i =0;i<points.length;i++){
            if(i==0){
                ctx.moveTo(points[0].x,points[0].y);
                ctx.quadraticCurveTo(point[0].x,point[0].y,points[1].x,points[1].y);
                int=int+1;
            }
            else if(i<points.length-2){
                ctx.moveTo(points[i].x,points[i].y);
                ctx.bezierCurveTo(point[int].x,point[int].y,point[int+1].x,point[int+1].y,points[i+1].x,points[i+1].y);
                int+=2;
            }
            else if(i==points.length-2){
                ctx.moveTo(points[points.length-2].x,points[points.length-2].y);
                ctx.quadraticCurveTo(point[point.length-1].x,point[point.length-1].y,points[points.length-1].x,points[points.length-1].y);
            }

        }
        ctx.stroke();
        ctx.closePath();
        ctx.beginPath();

        for(i =0;i<points.length;i++){
            ctx.beginPath();
            ctx.arc(points[i].x,points[i].y,5,0,2*Math.PI);
            ctx.fillStyle="#cccccc";
            ctx.fill();
            ctx.closePath();
        }

    }
</script>
</body>
</html>