前言

在我们日常开发中贝塞尔曲线无处不在：

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 - treturn 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 ); 这样就可以不断的从开始到结束循环往复，我们看下效果：

看着样子是不是还不错哈哈哈

面试官问我会canvas? 我可以绘制一个烟花动画相关推荐

前端:用canvas绘制一个烟花动画
关注并将「趣谈前端」设为星标每日定时推送技术干货/优秀开源/技术思维前言在我们日常开发中贝塞尔曲线无处不在: svg 中的曲线(支持 2阶. 3阶) canvas 中绘制贝塞尔曲线几乎所有前端 ...
面试官问我会不会APP抓包,我..
点击"小詹学Python",选择"置顶"公众号重磅干货,第一时间送达本文转载自咸鱼学Python,禁二次转载标题这个题目应该是我面试答的最好的一题了,所以 ...
作为一个面试官，我会这样问问题——面试攻略之见招拆招
核心内容提示: 楼主以一个面试官的身份,解读面试人员会问什么问题,为什么要问这个问题,以及最重要的,如何应答. 希望能给找工作的各位同学一点提示与帮助. PS. 文章写得稍微有点长,关键的地方我都已用 ...
大叔手记（10）：别再让面试官问你单例
大叔手记(10):别再让面试官问你单例(暨6种实现方式让你堵住面试官的嘴) ... 2012-2-19 09:03| 发布者: benben| 查看: 283| 评论: 0 摘要: 引子经常从Recr ...
面试官问你“有什么问题问我吗？”，你该如何回答？
我还记得当时我去参加面试的时候,几乎每一场面试,特别是HR面和高管面的时候,面试官总是会在结尾问我:"问了你这么多问题了,你有什么问题问我吗?".这个时候很多人内心就会陷入短暂的纠 ...
面试官问面向对象特点_最好的面试官有什么共同点？
面试官问面向对象特点 by Aline Lerner 通过艾琳·勒纳(Aline Lerner) 最好的面试官有什么共同点? 我们查看了成千上万的真实访谈以找出答案. (What do the bes ...
面试官问你有什么要问的时候，大胆的提出类似问题
前言我还记得当时我去参加面试的时候,几乎每一场面试,特别是HR面和高管面的时候,面试官总是会在结尾问我:"问了你这么多问题了,你有什么问题问我吗?".这个时候很多人内心就会陷入短 ...
已经成功拿到了几个offer的我来告诉你，Android面试官问的一些问题，看完这一篇就没有拿不到的offer
前言我是2020年毕业于中南大学的计算机学院的,大家可以叫我小吴,我嘞毕业之后在华为实习了差不多一年多,一直都从事着Android开发. 然后2021年的时候因为我自己的一些原因打算离职到外面看看, ...
面试官问：如何看待加班？你如何完美回答？
面试中面试官问你啥问题,小编都给你整理在这里了.每天都会整理一份最接地气的面试题,希望能帮助到你! 同时带上一套视频教程[带你横扫PHP职场全面解读PHP面试],感谢你对公众号的关注,关注以下公众号 ...

面试官问我会canvas? 我可以绘制一个烟花动画

前言

绘制贝塞尔曲线

绘制贝塞尔曲线动画

面试官问我会canvas? 我可以绘制一个烟花动画相关推荐

最新文章

热门文章