标签：动画 面试官 贝塞尔 曲线 ctx canvas percent 100
前言
在我们日常开发中贝塞尔曲线无处不在：
- svg 中的曲线（支持 2阶、 3阶）
- canvas 中绘制贝塞尔曲线
- 几乎所有前端2D或3D图形图表库(echarts，d3，three.js)都会使用到贝塞尔曲线
所以掌握贝塞尔曲线势在必得。 这篇文章主要是实战篇，不会介绍和贝塞尔相关的知识， 如果有同学对贝塞尔曲线不是很清楚的话：可以查看我这篇文章——深入理解SVG
绘制贝塞尔曲线
第一步我们先创建ctx, 用ctx 画一个二阶贝塞尔曲线看下。二阶贝塞尔曲线有1个控制点，一个起点，一个终点。
const canvas = document.getElementById( \'canvas\' );
const ctx = canvas.getContext( \'2d\' );
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = \'#000\';
ctx.moveTo(100,100)
ctx.quadraticCurveTo(180,50, 200,200)
ctx.stroke();这样我们就画好了一个贝塞尔曲线了。
绘制贝塞尔曲线动画
画一条线谁不会哇？接下来文章的主体内容。 首先试想一下动画我们肯定一步步画出曲线？ 但是这个ctx给我们全部画出来了是不是有点问题。我们重新看下二阶贝塞尔曲线的实现过程动画，看看是否有思路。
从图中可以分析得出贝塞尔上的曲线是和t有关系的， t的区间是在0-1之间，我们是不是可以通过二阶贝塞尔的曲线方程去算出每一个点呢，这个专业术语叫离散化，但是这样的得出来的点的信息是不太准的，我们先这样实现。
先看下方程：
我们模拟写出代码如如下：
//这个就是二阶贝塞尔曲线方程
function twoBezizer(p0, p1, p2, t) {
const k = 1 - t
return k * k * p0 + 2 * (1 - t) * t * p1 + t * t * p2
}
//离散
function drawWithDiscrete(ctx, start, control, end,percent) {
for ( let t = 0; t <= percent / 100; t += 0.01 ) {
const x = twoBezizer(start[0], control[0], end[0], t)
const y = twoBezizer(start[1], control[1], end[1], t)
ctx.lineTo(x, y)
}
}我们看下效果：
和我们画的几乎是一模一样，接下啦就用requestAnimationFrame 开始我们的动画给出以下代码：
let percent = 0
function animate() {
ctx.clearRect( 0, 0, 800, 800 );
ctx.beginPath();
ctx.moveTo(100,100)
drawWithDiscrete(ctx,[100,100],[180,50],[200,200],percent)
ctx.stroke();
percent = ( percent + 1 ) % 100;
id = requestAnimationFrame(animate)
}
animate()这里有两个要注意的是， 我是是percent 不断加1 和100 求余，所以呢 percent 会不断地从1-100 这样往复，OK所以我们必须要动画之前做一次区域清理， ctx.clearRect( 0, 0, 800, 800 ); 这样就可以不断的从开始到结束循环往复，我们看下效果：
看着样子是不是还不错哈哈哈
标签：动画,面试官,贝塞尔,曲线,ctx,canvas,percent,100 来源： https://www.cnblogs.com/ipython258/p/14939420.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。