vue使用canvas教程

大家好，前段时间呢，我把我的这个主页给他更新了一下，以前的那个代码案例啊，全部都放在这里面了。这一次呢想给大家分享的一个是我写了一个 cameras 项目，我管他叫灵动 cameras， 放在这里了，大家如果想看的话也可以进我的主页点这里进， 效果呢是长这样子的，是一个 canvas 的一个曲线图，然后里面有填充的渐变色，然后右边呢也可以对他进行调整，比如说我们把这个速度调快，速度调慢，然后线宽， 然后密度都是可以动态调整的。那这个项目用来入门是一个非常好的一个项目，你可以了解 carries 它最基础的应用，以及我们市面上做可视化的基础原理大致都是什么，你总会知道。好了，我们现在开始，我们首先拆解一下 这个里面它包含那些元素，左边是 cameras 区域，右边是控制区域，左边的 cameras 里面又包含哪些呢？线条，然后下面的填充还有动画。首先我们拆解线条呢，它就变成了这样，这样的一个线条它是怎么做的呢？首先我们知道 cameras 里面 如果要画这种图的话，有几种方法呢？最常见的 lie to 对不对？然后还有 arc， 然后还有呢就是它的贝塞尔曲线，贝塞尔曲线分三次贝塞尔曲线和二次贝塞尔曲线， 那我们这里呢，用的就是三次 best 曲线。首先我们说一下他们之间的优缺点啊， like to， 如果你用 like to 的话，我们都知道 like to 是在 cameras 上面画一个指定一个点，然后再指定另外一个点， 相当于你画一条直线一样，但我们刚才那是曲线，画出来会有什么结果呢？我们知道如果是这样画的话没有什么问题，但是就算你画的很细致， 他也会有锯齿的感觉，那么第一条就不能用，那么第二条我们用 arx 方式， arx 方式倒是非常简洁，但是网上出现了一种 ax 方式，是指定他的点位，就是他是由很多很多个点组成的，就是有很多很多个点，从这得得得 这样，那这样画出来结果就会导致如果你的线宽画的很小很小的话，你就能清晰的看出他是由很多很多个小点组成的。这种情况在某一些特殊场景下，可能不太符合我们的要求，我们就选用了贝塞尔取件，那么这里二次贝塞尔取件和三次贝塞尔取件他其实都是可以用的。这里我为了方便， 我就用了一个三次贝斯二曲线。三次贝斯二曲线和二次的区别在于二次啊，他只能指定一个点，就是我们可以看到这个图上面 p 零是开始的位置，我们需要指定，比如说我们现在先说这个二次，二次的话，我们需要指定两个点，首先是需要指定一个 p 一点，再指定一个 p 二点，那这样他画出来的就是这么样一个曲线，如果你的 p 一拉的越高，越往上拉，那这个曲线是不是就越往上升， 就形成了所谓的波高，就是有这里的高度。二次是用了一个点，那三次他是用两个点，你可以指定两个点的位置。那么举个例子， 比如说这里是三个点， p 一、 p 二、 p 三，那 p 一已经在这了，它这里已经是曲线，那如果我把 p 二拉到这个下面， 这个曲线是不是也跟着下来？然后如果我把 p 三往上拉，他就又会回去，就能够形成像我们这样的一个曲线。好了，这个曲线画好了，那怎么画一整副的曲线呢？这里我们就需要把这个里面的注视解开 给大家看一下，这里就画成了一整副的曲线，对不对？那这里是怎么画的呢？这里原理啊，是这里啊有个 drum map 专卖部，他做了一个循环地规，那地规干嘛呢？地规一直从这生成这一条线，如果这条线呢，超过了这个 w 位置，这个 w w 就是这个整副 canvas 的宽度，如果超过了这个呢？那就把这幅 canvas 先保存下来，那这样循环生成呢？就能够生成这样一个曲线了。