女神节告白代码

今天是女神节,送给所有女神们一句话:

爱自己是终生浪漫的开始,无论何时都要好好爱自己

目录

1. 请求动画帧填充

2.点类

3.粒子类

​编辑 4.ParticlePool 池类

5.创建和填充

6.处理循环队列

7.更新活动粒子

8.移除非活性粒子

9.绘制有源粒子 

10.整合

​编辑 11.进行样式表达

 12.使用虚拟画布创建粒子图像

13.用来创建路径的辅助器功能

14.创建路径

15.创建填充

15.创建图像

16.做出成果

17.创建新的粒子

18.更新和绘制粒子

19.重新处理画布大小

20. 延迟渲染引导

 21.全部代码


女神节告白代码_第1张图片

 今天我们来写表白爱心代码

首先HTML里body只要写两行代码就可以了,后面都是js代码了

我们的样式css代码如下:

女神节告白代码_第2张图片

首先我们先定义一个Settings

女神节告白代码_第3张图片

1. 请求动画帧填充

RequestAnimationFrame polyfill by Erik M?ller

女神节告白代码_第4张图片

2.点类

 Point class

女神节告白代码_第5张图片

3.粒子类

Particle class

女神节告白代码_第6张图片 4.ParticlePool 池类

 ParticlePool class

女神节告白代码_第7张图片

5.创建和填充

create and populate particle pool 

女神节告白代码_第8张图片

6.处理循环队列

 handle circular queue 

女神节告白代码_第9张图片

7.更新活动粒子

update active particles

女神节告白代码_第10张图片

8.移除非活性粒子

remove inactive particles

女神节告白代码_第11张图片

9.绘制有源粒子 

draw active particles

女神节告白代码_第12张图片

10.整合

Putting it all together

女神节告白代码_第13张图片 11.进行样式表达

get point on heart with -PI <= t <= PI

女神节告白代码_第14张图片

 12.使用虚拟画布创建粒子图像

creating the particle image using a dummy canvas

女神节告白代码_第15张图片

13.用来创建路径的辅助器功能

 helper function to create the path

女神节告白代码_第16张图片

14.创建路径

 create the path

女神节告白代码_第17张图片

15.创建填充

15.创建图像

女神节告白代码_第18张图片

16.做出成果

女神节告白代码_第19张图片

17.创建新的粒子

女神节告白代码_第20张图片

18.更新和绘制粒子

update and draw particles

女神节告白代码_第21张图片

19.重新处理画布大小

女神节告白代码_第22张图片

20. 延迟渲染引导

 delay rendering bootstrap

女神节告白代码_第23张图片

 21.全部代码



  
    
  
  
  
      

女神节快乐!

好了,这就是全部爱心代码了

今天是三八女神节,无论是小妹妹还是大姐姐,我都想对我的同性说:生活处处充满美好,无论身处什么逆境,都应该往前看,一切都会过去的,我们女性大部分都会因为感情,学业,家庭的等困扰所影响,我一直觉得感情应该以佛系的态度看待,学业,努力向上我觉得就很幸福,自己想要的自己去努力争取,不去依附她人,做自己的女王,你就是这个世界最闪闪发光的人!!!

今天的分享就到此结束了

创作不易点赞评论互关三连

 

你可能感兴趣的:(JavaScript,css,html,前端)