用canvas绘制一个烟花动画
前言
在我们日常开发中贝塞尔曲线无处不在:
svg 中的曲线(支持 2阶、 3阶)
canvas 中绘制贝塞尔曲线
几乎所有前端2D或3D图形图表库(echarts,d3,three.js)都会使用到贝塞尔曲线
所以掌握贝塞尔曲线势在必得。这篇文章主要是实战篇,不会介绍和贝塞尔相关的知识, 如果有同学对贝塞尔曲线不是很清楚的话:可以查看我这篇文章——深入理解SVG
绘制贝塞尔曲线
第一步我们先创建ctx, 用ctx 画一个二阶贝塞尔曲线看下。二阶贝塞尔曲线有1个控制点,一个起点,一个终点。
const canvas = document.getElementById( 'canvas'