前言:我的这个share很简单,没什么技术水准,主要是我自己觉得canvas这个标签很cool!,简单实用又能装X,而且又能实现很多看起来很炫的东西。

一 关于canvas

<canvas>是一个可以使用脚本(通常为JavaScript)在其中绘制图形的 HTML 元素.

<canvas> 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。 基于Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。<canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。

兼容性:

用法:声明一个canvas标签,由于部分浏览器并不支持,所以通常在写代码的时候,添加一个p标签。

Js部分 绘制一个直线的demo

运行结果:

二 animate属性介绍

CSS animation属性是如下属性的一个简写属性形式:

一共有八个属性:

具体的用法,传送门:https://www.w3cplus.com/content/css3-animation

具体是定义一个动画名animation-name,然后定义动画的持续时间,循环次数,动画方式,开始和结束所有变动的位置等等,实际上也就是定义一个dom元素的帧动画的整个过程。

兼容性

三 不使用插件手写一个粒子效果的背景

我们最终要实现的效果是这样

类似于知乎的登录页

实际上这样的效果,网上有很多基于jquery的插件(例如particles.js、animate.css等等),但是只是调用一些封装好的api自然只是一些工具的使用者。

考虑自己原生js+css的写一个

目录就是一个简单的html+js文件。

进入页面的时候调用这个方法。

具体实现是两个对象,一个绘制点的函数

ParticleEffect这个对象,定义了粒子效果背景的常量和一些动作函数。

Utils这个对象用来获取和更新一些BOM的属性。

最重要的是函数Particle,实现绘制的具体过程.

遇到的问题:

最开始绘制的时候是写了一个定时器,每隔1000ms重新绘制,虽然解决了问题,但是对浏览器负担比较大,而且容易丢帧。深入查找这个问题

SetTimeout的弊端,就是只是把代码添加到浏览器UI线程队列,所以当打开的页面比较多,且需要大量的UI绘制,会导致页面绘制延迟和丢帧的情况。

解决方法:

查找资料,HTML5新增了一个requestAnimationFrame()函数,比较生僻,他的作用是接收一个参数,即在重绘屏幕前调用以个函数。这个函数负责改变下一次重绘时的DOM样式。为了创建动画循环,可以像使用setTimeout()一样,把多个对requestAnimationFrame()的调用连缀起来。

使用前先判断一下是否支持html5的标签,如果不支持就采用定时器的写法。

优化的方向:

目前只是简单的声明了一个简单的随机函数,每次刷新页面的时候改变点和线的颜色,有时间改成不断自动渐变的背景颜色,估计效果体验要更cool一些。

四 一些好的动画库的推荐

传送门:http://www.uisdc.com/2016-9-front-end-animation

canvas实现的粒子效果的更多相关文章

  1. 基于HTML5 Canvas生成粒子效果的人物头像

    前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单.今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下 ...

  2. CodePen 作品秀:Canvas 粒子效果文本动画

    作品名称——Shape Shifter,基于 Canvas 的粒子图形变换实验.在页面下方的输入框输入文本,上面就会进行变换出对应的粒子效果文本动画. CodePen 作品秀系列向大家展示来自 Cod ...

  3. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  4. Canvas + JavaScript 制作图片粒子效果

    首先看一下源图和转换成粒子效果的对比图:       左侧图片为源图,右侧图片为粒子效果图.该效果是在Canvas画布上制作的.将图片制作成粒子效果相对而言是比较简单的.重点了解两个知识点即可 1:图 ...

  5. 基于HTML5 Canvas粒子效果文字动画特效

    之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的 ...

  6. 超炫的HTML5粒子效果进度条 VS 如何规范而优雅地code

    最近瞎逛的时候发现了一个超炫的粒子进度效果,有多炫呢?请擦亮眼镜!   // _this.ch){ _this.particles.splice(i, 1); } }; this.Particle.p ...

  7. Android碎裂的粒子效果

    最近看到一段时间都没怎么更新文章了,一直在学习iOS相关内容.偶然间看到一个碎裂的粒子效果,觉得很有意思,就查了查,参考下网上的思路自己撸了个轮子. 好了,说了这么多,先看看效果吧~ 依惯例,先说下行 ...

  8. canvas学习之粒子动画

    项目地址:http://pan.baidu.com/s/1ccTptc 粒子动画意思就是把一个图片粒子画,然后使用粒子作出动画效果,主要两个问题:一个图片如何粒子化,这里面我们使用canvas的get ...

  9. 酷!使用 jQuery & Canvas 制作相机快门效果

    在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...

随机推荐

  1. MongoDB系列二(介绍).

    一.特点 学习一个东西,至少首先得知道它能做什么?适合做什么?有什么优缺点吧? 传统关系型数据库,遵循三大范式.即原子性.唯一性.每列与主键直接关联性.但是后来人们慢慢发现,不要把这些数据分散到多个表 ...

  2. Tomact高并发&Servlet线程处理

    Servlet/JSP技术和ASP.PHP等相比,由于其多线程运行而具有很高的执行效率.由于Servlet/JSP默认是以多线程模式执行的,所以,在编写代码时需要非常细致地考虑多线程的安全性问题.然而 ...

  3. 常用七大经典排序算法总结(C语言描述)

    简介 其中排序算法总结如下: 一.交换排序 交换排序的基本思想都为通过比较两个数的大小,当满足某些条件时对它进行交换从而达到排序的目的. 1.冒泡排序 基本思想:比较相邻的两个数,如果前者比后者大,则 ...

  4. C语言描述队列的实现及操作(链表实现)

    // 队列的单链表实现 // 头节点:哨兵作用,不存放数据,用来初始化队列时使队头队尾指向的地方 // 首节点:头节点后第一个节点,存放数据 #include<stdio.h> #incl ...

  5. Matlab绘图基础——绘制三维曲线

    %% 绘制三维曲线 %plot3函数,其中每一组x,y,z组成一组曲线的坐标参数,选项的定义和plot函数相同. %1.当x,y,z是同维向量时,则x,y,z 对应元素构成一条三维曲线. x0 = 0 ...

  6. 【RabbitMQ系列】 Spring mvc整合RabbitMQ

    一.linux下安装rabbitmq 1.安装erlang环境 wget http://erlang.org/download/otp_src_18.2.1.tar.gz tar xvfz otp_s ...

  7. web面试题

    1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

  8. C博客作业--指针

    一.PTA实验作业 题目1:输出月份英文名 1. 本题PTA提交列表 2. 设计思路 3.代码截图 4.本题调试过程碰到问题及PTA提交列表情况说明. 选择这一题是因为这道题的通过率较低.为什么会这样 ...

  9. C语言博客-指针

    一.PTA实验作业(5分) 题目1:6-1 两个4位正整数的后两位互换 1. 本题PTA提交列表 2. 设计思路 3.代码截图 4.本题调试过程碰到问题及PTA提交列表情况说明. 无 题目2:6-3 ...

  10. Beta冲刺 第三天

    Beta冲刺 第三天 1. 昨天的困难 昨天的困难主要集中在对Ajax的使用上,不熟悉这种语法,所以也就浪费了时间,导致昨天的批量删除没有完全完成. 2. 今天解决的进度 潘伟靖: 1.完善了昨天没写 ...