获取三次贝塞尔曲线控制点坐标（canvas）

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

小沅白

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

阅读量2.8k

点赞数 3

文章标签： canvas js

本文链接：https://blog.csdn.net/O0_0O__/article/details/108320247

版权

本文介绍了如何获取三次贝塞尔曲线的控制点坐标，通过canvas的bezierCurveTo方法绘制曲线，并通过类似淘宝放大镜的效果来移动控制点。提供了一个简单的代码实现，为后续的贝塞尔曲线运动打下基础。

摘要由CSDN通过智能技术生成

效果说明

通过改变贝塞尔曲线的控制点，做出理想的曲线效果，再得到贝塞尔曲线点控制点的坐标。效果如下
效果演示

思路

使用canvas的bezierCurveTo方法，观察曲线效果。
控制点的移动实现思路与淘宝的放大镜思路相似
每更新一次控制点都重新绘制贝塞尔曲线和新的控制点

代码

这里只获取到坐标点，并没有做过多的后续处理，还比较粗糙。
~~代码直接粘贴就好~~

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <canvas class="can" width="1000" height="1000"></canvas>
    <button>增加</button>
    <script>
    //用来存储贝塞尔曲线的控制点
        var pointarr = [{
    
            start: {
     x: 520, y: 10 },
            c1: {
     x: 20, y: 50 },
            c2: {
     x: 820, y: 150 },
            end: {
     x: 520, y: 200 }
        }]
        var canvas = document.querySelector('.can')
        var ctx = canvas.getContext('2d');
		//绘制出控制点
        function draw_control() {
    
            for (var i = 0; i <