使用帆布怎么绘制一个贝赛尔曲线轨迹动画

　　介绍

本篇文章为大家展示了使用帆布怎么绘制一个贝赛尔曲线轨迹动画,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

<强>二次贝赛尔曲线

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

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

放入完整的代码中

& lt; ! DOCTYPE  html> 　　& lt; html  lang=癳n"祝辞 　　 　　& lt; head> 　　,,,& lt; meta  charset=癠TF-8"比; 　　,,,& lt; meta  name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比; 　　,,,& lt; meta  http-equiv=癤-UA-Compatible",内容=癷e=edge"比; 　　,,,& lt; title>二次贝塞尔曲线动画& lt;/title> 　　,,,& lt; style> 　　,,,,,,,,body  { 　　,,,,,,,,,,,背景:,# 0 f1632; 　　,,,,,,,} 　　 　　,,,,,,,# canvas  { 　　,,,,,,,,,,,边界:,1 px  solid  # ccc; 　　,,,,,,,} 　　,,,,,,,,# img  { 　　,,,,,,,,,,,显示:,没有,, 　　,,,,,,,,,,,& lt; ! - img直接隐藏就行,后面会直接引用——比; 　　,,,,,,,} 　　,,,,,,, 　　,,,& lt;/style> 　　& lt;/head> 　　 　　& lt; body> 　　,,,& lt; canvas  id=癱anvas",宽度=?500“,身高=?50“祝辞& lt;/canvas> 　　,,,& lt; img  id=癶ttps://www.yisu.com/zixun/img", src=" https://s3.imgsha.com/2019/04/22/light.png "> 　　 　　<>脚本 　　var ctx=. getelementbyid(画布).getContext (2 d); 　　var img=. getelementbyid (img); 　　var %=0; 　　var data={ 　　开始:(400、200), 　　点:(300、100), 　　结束:(100、400), 　　部门:“数据1 ', 　　值:4321 　　} 　　 　　init()函数{ 　　%=0;//每次重置进程 　　画(); 　　} 　　函数画(){ 　　ctx。clearRect (0, 0, 1500, 750);//每次清除画布 　　ctx。strokeStyle=? ffffff”;//设置线条样式 　　 　　drawCurvePath(数据。首先,数据。点,数据。最终,百分比); 　　 　　% +=0.8;//进程增加,这个控制动画速度 　　 　　如果(% <=100){//没有画完接着调用,画完的话重置进度 　　requestAnimationFrame(画); 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

使用帆布怎么绘制一个贝赛尔曲线轨迹动画