WeaveSilk基于HTML5的绘图特效平台

3年前 (2022) toupiaogaoshou

0 0

WeaveSilk基于HTML5的绘图特效平台简介：

　　基于HTML5的在绘图特效平台上WeaveSilk它是最流行的使用HTML5网页技术开发的一个绘制三维图形的网站，将数学算法发挥得淋漓尽致，展现出美丽的特效，搭配耀眼的色彩效果，简直美一塌糊涂。

　　使用方法简单：

　　1.进入主站，通过鼠标点击拖动，形成优美的光线，分为双边对称和四边对称模式;

　　2.截下图案，剩下的就是图案，PS的活儿了。

　　以下是比较详细的绘制方法：

　　1.波浪线画法

　　这种效果的一个重要亮点是光滑的波浪。我相信细心的朋友一定注意到了随机事件。每条线都是一条随机路径。在于如何选择随机点的位置，而在于如何用光滑的线连接。如图1所示，左图是随机线中的每个随机点。如果用直线连接，那就是折线，显然不是我们想要的波浪线;如果像中图一样用曲线连接，难点在于如何确定曲线的控制点;所以我用的方法是像右图一样，用每两个点的中点作为实际连接的锚点，用原来的随机点作为控制点，既能保证光滑，又能保证曲线与随机点的方向一致，以免最终波浪线变形。

　　2.波浪线间的填充效果

　　波浪线完成后，每两条相邻的波浪线应连续填充，否则丝绸将成为粗线的亚麻布。当我第一次看到这个效果时，我正在考虑这个问题。经过仔细观察，我发现波浪线之间的填充颜色有很强的渐变，甚至可以在一些极端区域看到细线。这让我确定了之前的猜测，波浪线之间的填充是几条细线，而不是整个填充颜色。

　　也就是说，在绘制两条相邻的波浪线时，同时补充它们之间的几条过渡线，这样当过渡线足够时就会形成填充。

　　3.颜色的过渡

　　丝绸华丽的颜色是整个效果中最引人注目的地方，它实际上是一个连续的光谱。可见光谱从长波到短波依次经历彩虹的七种颜色：红色.橙.黄.绿.青.蓝.紫。

　　4.光效

　　为了找出整个效果的点睛之笔，也就是光影效果，我真的花了很多时间。我的想法是这样的。当所有的线条都画出来时，由于波浪线的密度，颜色的深度就会形成。毫无疑问，只要波浪线一条一条地画出来，自然会自然而然地画出来。但仔细观察后发现，除了饱和的颜色外，原效果中线条密集的地方还有明显的白色亮点。

　　所以一定要用到BlendMode.ADD这种算法，因为只有这种方法会在两种颜色叠加时增加RGB实际值。但是当我用它的时候。BlendMode.ADD后来发现效果与预期相差甚远，像素感特别强，更不用说平滑了。我花了两个晚上来解决这个问题，修改透明度.颜色值.添加高光层等。做了各种尝试，最后发现原因出现在一个小细节上。因为我用的是它。BitmapData位图绘制，黑色背景上有一层输出位图，我初始化时将输出位图定义为完全透明，所以绘制的波浪线实际上是在透明层上叠加的，所以结果很差。解决办法是将输出背景改为不透明的黑色，这样效果就完全一样了!

　　至于效果中的其他细节，比如跟随线条的小星星，因为不是核心技术瓶颈，我就不一一解释了。我写这个代码的目的是告诉你Flash开发者，Flash和ActionScript已经很成熟了，只要你在网页上看到任何华丽的效果，不管它是否使用，Flash开发基本上可以用Flash做出相同甚至更好的结果。