canvas笔记-二次贝塞尔曲线与三次贝塞尔曲线的用法

最新推荐文章于 2024-08-14 00:09:51 发布

IT1995

最新推荐文章于 2024-08-14 00:09:51 发布

阅读量3.9k

点赞数 49

分类专栏： Web相关技术 web前端文章标签： HTML WEB前端 canvas

本文链接：https://blog.csdn.net/qq78442761/article/details/106491414

版权

web前端同时被 2 个专栏收录

181 篇文章 6 订阅

订阅专栏

Web相关技术

160 篇文章 8 订阅

订阅专栏

此博文不研究其算法，只记录下其用法。

首先是二次贝塞尔曲线！

函数是这样的

quadraticCurveTo(cpx, cpy, x, y);

其中cpx为贝塞尔控制点x；

其中cpy为贝塞尔控制点y；

其中x为结束点x坐标；

其中y为结束点y坐标。

这里隐藏了一个开始点，一般用beginPath()和moveTo方法来定义开始点：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
    当前浏览器不支持canvas
</canvas>

<script>

    window.onload = function(){

        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        let context = canvas.getContext("2d");

        context.beginPath();
        context.moveTo(100, 100);
        context.quadraticCurveTo(100, 300, 400, 400);
        context.stroke();
    }


</script>

</body>
</html>

下面是三次贝塞尔曲线

函数为bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

其中cp1x为第一个贝塞尔控制点x轴坐标；

其中cp1y为第一个贝塞尔控制的y轴坐标；

其中cp2x为第二个贝塞尔控制的x轴坐标；

其中cp2y为第二个贝塞尔控制的y轴坐标；

其中x为结束点坐标；

其中y为结束点坐标；

同样这个函数也需要一个moveTo去增加一个开始点！

程序运行截图如下：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
    当前浏览器不支持canvas
</canvas>

<script>

    window.onload = function(){

        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        let context = canvas.getContext("2d");

        context.beginPath();
        context.moveTo(20, 20);
        context.bezierCurveTo(20, 700, 200, 100, 700, 500);
        context.stroke();
    }


</script>

</body>
</html>