Canvas实现贝赛尔曲线轨迹动画

最新推荐文章于 2024-06-12 19:26:52 发布

weixin_34179968

最新推荐文章于 2024-06-12 19:26:52 发布

阅读量1.4k

点赞数

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5cbebc4b6fb9a032204fd5bd

版权

本文分享了如何使用Canvas实现二次贝赛尔曲线轨迹动画，包括添加渐变、头部光晕、文本以及动画完成后在结束位置添加文本和图片的详细步骤。通过代码示例，展示了如何创建和调整动画效果，提供了完整的代码参考。

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

最近实现的下图的效果,跟大家分享一下

假如我们要画下图曲线的动画

如果每次都画一条短线连接起来,如下图被分成五段

再看十段

要是被分的段数足够多时每次画一段就很像曲线轨迹了

二次贝赛尔曲线

/**
 * 二次贝塞尔曲线动画
 * @param  {Array<number>} start 起点坐标
 * @param  {Array<number>} 曲度点坐标(也就是转弯的点,不是准确的坐标,只是大致的方向)
 * @param  {Array<number>} end 终点坐标
 * @param  {number} percent 绘制百分比(0-100)
 */
 
  function drawCurvePath(start, point, end, percent){
            ctx.beginPath();    //开始画线
            ctx.moveTo(start[0], start[1]);   //画笔移动到起点
            for (var t = 0; t <= percent / 100; t += 0.005) {
                //获取每个时间点的坐标
                var x = quadraticBezier(start[0], point[0], end[0], t);   
                var y = quadraticBezier(start[1], point[1], end[1], t);
                ctx.lineTo(x, y);   //画出上个时间点到当前时间点的直线
            }
             ctx.stroke();   //描边
        }
        
        
/**
 * 二次贝塞尔曲线方程
 * @param  {Array<number>} start 起点
 * @param  {Array<number>} 曲度点
 * @param  {Array<number>} end 终点
 * @param  {number} 绘制进度(0-1)
 */
     function quadraticBezier(p0, p1, p2, t) {
            var k = 1 - t;
            return k * k * p0 + 2 * (1 - t) * t * p1 + t * t * p2; 
        }
复制代码

更加详细的贝塞尔曲线内容请参考这篇博客

放入完整的代码中

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv=

最低0.47元/天解锁文章

weixin_34179968

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Canvas实现贝赛尔曲线轨迹动画

最近实现的下图的效果,跟大家分享一下假如我们要画下图曲线的动画如果每次都画一条短线连接起来,如下图被分成五段再看十段要是被分的段数足够多时每次画一段就很像曲线轨迹了二次贝赛尔曲线/** * 二次贝塞尔曲线动画 * @param {Array<number>} start 起点坐标 * @param {Array<number>} 曲度点坐...
复制链接

扫一扫