永磁⽆刷电机及其驱动技术_PDF.rar
永磁⽆刷电机及其驱动技术 ⾼清完整版pdf 全⾯阐述了现代永磁交流电机系统的设计及驱动控制思想
⽂件：
以下内容⽆关：
-------------------------------------------分割线---------------------------------------------
下⾯我们开始尝试研究不同的绘图风格和技术 - 边缘平滑，贝塞尔曲线，墨⽔和粉笔，笔和印章和图案 -等等。事实证明，⽹上没有太多关于此的内容。在下⾯的⽰例中，您请⼤家查看演⽰源代码，以便了解正在发⽣的事情。鼠标跟随
这篇教程将带您从基础知识（在画布上绘制原始⿏标跟随线），⼀直到那些和谐画笔，以及复杂的曲线和笔触，从边缘跨越并卷曲成奇怪美丽的结构。 下⾯我将介绍不同的刷⼦代码实现，以便您可以⾃⼰了解如何在画布上实现⾃由绘图。
当然，在继续之前，对HTML5画布有⼀定的了解是必要的。
基本
所以让我们从⼀个⾮常基本的⽅法开始。
简单的铅笔
我们在画布上观察“mousedown”，“mousemove”和“mouseup”事件。
在“mousedown”上，我们将指针移动到单击的坐标（veTo）。在“mousemove”上，我们画⼀条线到⿏标的新坐标
（ctx.lineTo）。最后，在“mouseup”上，我们通过将isDrawingflag 设置为false来结束绘图。
此标志⽤于防⽌在画布上移动⿏标时进⾏绘制（没有单击画布的情况）。您可以通过在“onmousedown”中分配“onmousemove”事件处理程序（然后在“onmouseup”中删除它）来避免标记，但flag是⼀个简单的解决⽅案，也可以正常⼯作。
设置光滑连接
现在，我们可以通过改变值来控制线的厚度ctx.lineWidth。但是，粗线造成锯齿状的边缘。
这通常发⽣在“急转弯”的位置，并且可以通过设置ctx.lineJoin和ctx.lineCap成"round" 来解决（有关这些如何影响渲染的⽰例，请参阅MDN ）。
借助阴影使边缘平滑
现在线条没有在拐⾓周围出现锯齿。但它们的边缘也不是很光滑。这是因为这⾥没有抗锯齿化（在canvas上控制抗锯齿从未如此简单）。那么我们如何效仿呢？
有种⽅法就是借助阴影使边缘平滑。
我们添加的内容都是ctx.shadowBlur和ctx.shadowColor。边缘现在肯定更平滑，因为线条被阴影包围。但还是有⼀点问题：你会注意到线条在开始时⽐较薄和模糊，但是随着绘制的内容增加逐渐变得更厚更坚固。
这是⼀个有趣的效果，但也许完全不是我们想要的。那么为什么会这样呢？
原来这是由于阴影相互重叠，每增加⼀个点都重新stroke了，这样当前笔划的阴影与前⼀笔划的阴影重叠，后者与前⼀笔划的阴影重叠，依此类推。阴影越重叠，模糊越少，线越粗。那么我们如何解决这个问题呢？
人体3d建模基于点的⽅法
避免这类问题的⼀种⽅法是始终stroke⼀次。我们可以在⼀个数组中引⼊⼀个容器存储⿏标点，并且⼀次性stroke它们。⽽不是盲⽬地在每⼀次接收到⿏标mousemove的时候都去stroke。
如您所见，它看起来与第⼀个⽰例效果相同。现在我们可以尝试在此基础上添加阴影。注意它在整个路径中是如何保持均匀的。 基于点的阴影
边缘平滑与径向渐变
另⼀种平滑的途径是使⽤径向渐变。渐变允许更均匀的颜⾊分布，不像阴影通常⽐“平滑”更模糊。
但是，正如您所看到的，stroke使⽤渐变还有其他问题。请注意我们如何在每个⿏标移动点上使⽤圆形渐变填充区域的。当快速移动⿏标时，我们得到⼀系列断开连接的圆，⽽不是具有光滑边缘的直线。
解决此问题的⼀种⽅法是在两点间隔距离⼤时⽣成额外的点来填补断开的空间。
最后这是⼀条相当平滑的曲线！
您可能会注意到上⾯⽰例中的⼀个⼩变化。我们只存储上⼀个点，⽽不是存储路径的所有点。我们总是stroke从上⼀个点到当前的⼀个点。
有了上⼀个点那我们需要计算它与当前点之间的距离。如果距离太⼤，我们就在其中填充更多。这种⽅法的好处是我们不⽤存储整个points 阵列，这样就减少了内存的使⽤！
贝塞尔曲线
我遇到的⼀个有趣的概念是使⽤bezier线⽽不是直线。这允许⾃由绘制路径的曲线更⾃然更平滑。
塑料薄膜连续封口机
这个想法的实现是使⽤quadraticCurveTo来替换straight-line，⽤两个连续点之间的中间点作为⼆次贝塞尔曲线控制点。来试试吧：
到现在你已经知道：绘图和平滑曲线的⼀些基本知识。从简单的连线到更复杂的基于贝塞尔的曲线。让我们继续前进发现更有趣的事情吧。
刷⼦，⽑⽪，笔
刷⼦
现实的画笔⼯具箱中的⼀个技巧是简单地⽤图像stroke。我在 blog post by Andrew Trice.遇到了这种技巧。这种想法是使⽤⼀⼩部分图像作为画笔去stroke。这开启了很多可能性。
根据图像，我们可以实现不同的画笔样式。在这种情况下，它类似于厚刷。
⽑⽪（旋转画布）
跟前⾯⼀样⽤绘制图⽚⽅式填充路径，但每次绘制时⽣成随机的⾓度值旋转⼀下画布。
如果我们这样做，我们可以得到类似⽑⽪（或花环）⼀样的东西。
笔（变化宽度）
当谈到模拟钢笔写字时，⼀个很好的解决⽅案是简单地随机变化路径的线宽！我们仍然是结合moveTo+ lineTo的⽅式，但每次去更
改“lineWidth”绘制出来的线是什么样⼦呢？这是它的外观：
要记住的⼀件事是，为了使绘图看起来真实，随机值差别不应该太⼤。
笔2（多线条）
另⼀模拟钢笔的实现是通过多笔触完成的。我们在点与点之间连线stroke多次，⽽不是仅仅⼀次。
但是我们并不是在同⼀个坐标位置重复画线，因为这不会改变任何事情。
相反，我们在原始（图⽚上的绿点）位置旁边取⼏个随机点（图⽚上的蓝点），然后从那⾥开始。因此，不是⼀⾏，⽽是在原始线旁边增加了两天“凌乱”的线条。完美的钢笔模拟！
厚刷
你可以⽤这种“多笔触”技术做很多事情。我⿎励⼤家尝试⾃⼰的想法。
这⾥有⼀个例⼦，如果我们增加线条宽度并稍加修正第条线的偏移量，我们可以模拟⼀个厚刷⼦。边缘上的那些空⽩点使其看起来很逼真。
“切⽚”笔触
多笔触的⽅法中如果使⽤均匀的⼩点的偏移量，我们可以得到类似于切⽚的东西。
这⼀次，不使⽤图像。
简单的⽅法让路径呈现偏斜效果。
带有透明度的“切⽚”笔触
如果我们使⽤与前⾯⽰例中相同的画笔，并给每次笔触依次变⼩的透明度，我们会得到⼀个像这样的有趣效果。
多⾏线条
笔直线条⽤够了。我们是否可以将相同的技术应⽤于基于贝塞尔曲线的路径呢？当然。我们只需要在偏离原始点⼀定距离的位置绘制每条曲线。这就是它的样⼦：
带有透明度的多⾏线条
我们也可以使⽤相同的“褪⾊”技术，让其中每条线的不透明度依次降低。这使得这些线条看起来更加简洁优雅。
与直笔触⼀样，使⽤贝塞尔曲线的可能性是⽆尽的。
印记样
基本概念
在我们学会了如何划线和曲线后，实现印章刷不是更简单！我们所需要的只是在每次⿏标移动时，在⿏标的位置绘制某种形状。⽽已。这是⼀个⽤红⾊圆圈标记的例⼦。
追踪效果
您可以看到中间点的相同问题，我们可以使⽤相同的预填充技术解决这些问题。邮票的预填充往往会产⽣⾮常有趣的线索或管状效果。您可以通过在最后⼀个点和当前点之间预先填充每个点的间隔来控制管的密度。
随机半径，不透明度
当然，我们总是可以调情，以某种⽅式改变每个邮票。例如，第⼀个例⼦中随机变化的半径和不透明度就是这个。
形状
当涉及到那种邮票时，你可以尽可能地去 - 从我们刚看到的基本形状（例如圆圈）到由数百或数千条曲线组成的更复杂的路径。这⾥唯⼀的限制因素是性能。这是⼀个⽤简单的五⾓星冲压的例⼦。
旋转形状
这是同⼀颗星，但每次移动都会随机旋转，以获得更⾃然的感觉。
随机化⼀切！
哎呀，让我们放⼤⼀点 - 尺⼨，⾓度，不透明度，颜⾊，厚度！现在不是那么有趣。
彩⾊像素
我们也不仅限于形状。⼀种选择是直接操纵⿏标点周围的像素。⼀个简单的例⼦就是随机化它们的颜⾊和位置。
基于图案的画笔
现在我们已经过了抚摸和冲压，让我们来看看⼀个完全不同的野兽模式。我们可以使⽤canvas’随时createPattern填充路径。这会产⽣⼀些⾮常有趣的效果。我们来看⼀个简单的点图案。
圆点图案
注意这⾥是如何创建模式的。我们将实例化迷你画布，在其上绘制圆圈，然后将该画布⽤作主画布上的图案！我们可能也习惯使⽤普通图像，但使⽤canvas的美妙之处在于我们可以通过编程⽅式访问它，
并且⽆论如何我都可以更改它。这意味着我们可以创建动态模式，例如改变模式中圆的颜⾊，半径等。这也意味着我们可以更快更容易地尝试模式。
线条图案
根据前⾯的⽰例，您应该能够创建类似的东西。让我们说⼀个⽔平线条图案。
双⾊线条图案
…或垂直线条，具有互换的颜⾊。
彩虹
…甚⾄是多条不同颜⾊的线条。⼀切皆有可能。想想⼀些模式，并尝试在迷你画布上创建它。剩下的就是照顾createPattern和填充路径。
图⽚
最后，这是⼀个使⽤基于图像的模式与贝塞尔曲线路径⼀起使⽤的⽰例。这⾥改变的是我们将图像对象传递给createPattern（然后将结果模式分配给strokeStyle）。
喷雾
现在goold-old喷刷怎么样？我们可以通过⼏种⽅式实现它。其中之⼀是⽤颜⾊简单地填充⿏标点周围的区域（像素）。⾯积（半径）越⼤，喷雾越厚。我们填充的像素越多，它就越密集。
基于时间的喷雾
您可能会注意到，之前的⽅法并不像真正的喷雾那样。⼀个真正的喷漆⾯积不断，不只是当我们移动⿏标/刷。为了实现这⼀点，我们需要在按下⿏标时以恒定间隔绘制区域。这样，某些区域可以通过更长时间“保持喷雾”⽽变得更暗。
基于时间的喷雾，圆形分布
前⾯的例⼦更现实，但并不完全如此。真正的喷涂油漆在圆形区域上，⽽不是矩形。所以让我们尝试在圆形区域上分布像素。
好多了。
随机点
最后，我们还能做些什么来使喷雾更逼真吗？当然，除了使⽤图像作为印章。我们当然可以使涂料偶尔散布，就像在现实⽣活中⼀样。如果我们改变每个绘制像素的不透明度，我们会得到⾮常相似的效果。
邻居点连接
连接邻居点的概念由zefrank的Scribbler和doob先⽣的Harmony推⼴。如果你还记得Harmony画笔，如粗略，阴影，铬⾊ - 这就是我所说的效果。
开路电压这个想法是：在已经绘制的路径的附近点之间添加额外的笔划。这通常会产⽣草图，⽹页或某种阴影的效果; 额外的笔划在⼩的“弯曲”区域增加了较暗点的错觉。
全点连接
⼀个天真的⽅法是采⽤我们的第⼀个简单的基于点的画笔的例⼦，并添加额外的抚摸。对于沿路径的每个点，我们将朝着路径上的前⼀个点冲程：
你可以开始看到类似Harmony画笔的东西，但它并不完全相同。通过降低额外笔画的不透明度（即对⽐度）可以使其更加逼真和阴影。但要完全重建效果，我们需要遵循不同的算法。
邻居点
负责“附近”抚摸的部分是这样的：
复制代码
龙虾地笼1 var lastPoint = points[points.length-1];
2
3 for (var i = 0, len = points.length; i < len; i++) {
4 dx = points[i].x - lastPoint.x;
5 dy = points[i].y - lastPoint.y;
6 d = dx * dx + dy * dy;
在线日程7
8 if (d < 1000) {
9 ctx.beginPath();
10 ctx.strokeStyle = ‘rgba(0,0,0,0.3)’;
veTo(lastPoint.x + (dx * 0.2), lastPoint.y + (dy * 0.2));
12 ctx.lineTo(points[i].x - (dx * 0.2), points[i].y - (dy * 0.2));
13 ctx.stroke();
14 }
15 }
复制代码
这⾥发⽣了什么？看起来很疯狂 我花了⼀些时间来理解，但这个概念⾮常简单！
绘制线时，我们检查已经绘制的路径的整个距离，将所有点与当前（最后⼀个）点进⾏⽐较。如果该点在d < 1000最后⼀个点的某个接近度（）中，我们移动指向它的指针并从那⾥划线到当前点。dx * 0.2并dy * 0.2给那些额外的笔画稍微偏移。
⽽已。简单的想法，强⼤的效果。
⽑⽪通过邻居点
这种技术的⼀个有趣的转折 - 在和谐中看到 - 是创造⽪⽑效果。不是向附近点（从最后⼀点）划动，⽽是向相反⽅向⾏程。稍微偏移，它会在某些（近距离）区域产⽣⽑茸茸的笔触。
调查Harmony画笔后不久，我偶然发现了LukášTvrdý的精彩博客⽂章，很好地解释了邻居点技术的⼀些变化。他描述了不同参数如何影响笔画及其产⽣的效果类型。绝对值得⼀试。
所以你有它 - ⼀些基本的以及更有趣的绘图技术。我们这⾥只是划了⼀个表⾯。有⽆限的可能性来定制任何⼀个画笔，创造更多令⼈兴奋的效果。改变不透明度或颜⾊，宽度或偏移，引⼊随机因素，并产⽣全新的效果。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议