0%

前言

直接用webGL画出成千上万的粒子,并不像在canvas中造出相应数量的粒子“实例”,然后统一绘制那么简单;因为直接在webGL中绘制时,实际上是用着色器去绘制,而着色器的API有限,最重要的是数据传入着色器内的方式有限;但是另一方面由于着色器内可以进行并行运算,因此如果将原本在CPU中进行的计算转移到GPU内就会大幅提高运行效率,画面也就更流畅了。

帧缓冲就可以解决大量数据传入的问题,不过用帧缓冲来传递数据本质上是利用帧缓冲作为数据写入介质,将数据通过帧缓冲保存到纹理上,然后将纹理传入相应的着色器;帧缓冲实际上的作用其实更加强大

阅读全文 »

前言

逐帧动画就有点像gif图,就是将动画的所有帧都提取出来,然后按顺序进行播放;

利用CSS3中的steps()函数以及background-position即可轻易的实现!

阅读全文 »

前言

background属性实际上和fontanimationtransition等属性一样,是一个缩写属性;实际上是由多个相关的属性组成的。

平时我们可能用的多就是填个背景色或者背景图地址上去,偶尔再调个背景图适应,也就没怎么关注过了。

不过把所有的background-*属性了解一下,会帮助我们更加的理解背景的本质,关键时候就不怕各种微调了。

阅读全文 »

前言

箭头函数的设计目的就是替代函数表达式及匿名函数在某些场景的应用,使用箭头函数能够更加简洁明了地描述匿名函数和函数表达式!

箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。

—— MDN

阅读全文 »

前言

CSS渐变色实际上是一种特殊<iamge>类型,因此可以被用在任何可以使用<image>类型数据的属性中!而在CSS中,渐变有分为以下几种:

  • 线性渐变:对应linear-gradient()函数。
  • 径向渐变:对应radial-gradient()函数。
  • 圆锥渐变:对应conic-gradient()函数。
  • 重复渐变:对应repeating-linear-gradient()repeating-radial-gradient()函数。

渐变色的特点就是沿着某一方向,从一种颜色逐渐变化到另一种颜色(两种或两种以上颜色);关键就在于渐变颜色个数、对应的位置,空间上是如何变化的。

阅读全文 »