canvas实现的粒子效果

前言:我的这个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

时间: 2024-10-13 18:56:46

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

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

前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单.今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下来该图片会被打散成许多粒子,然后慢慢的重组成图片,鼠标滑过图片时粒子还会出现浮动的动画特效,看上去非常酷. 在线预览   源码下载 HTML代码如下 <p class="center">Change pixel resolution <input type="r

Canvas + JavaScript 制作图片粒子效果

首先看一下源图和转换成粒子效果的对比图:       左侧图片为源图,右侧图片为粒子效果图.该效果是在Canvas画布上制作的.将图片制作成粒子效果相对而言是比较简单的.重点了解两个知识点即可 1:图片是通过image对象形式绘制在画布上的,然后使用Canvas的getImageData接口,获取图像的像素信息. var imageData=ctx.getImageData(x, y, width, height); 参数说明:x,y为画布上的x和y坐标 width,height为获取指定区域图

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

文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫酷,能和鼠标互动吸附或者是躲避鼠标指针. 使用方法 1.该粒子动画库插件使用方法非常简单,首先要在页面中引入particles.js文件. <script src="js/particles.js"></script> 2.在页面中使用一个div来作为放置粒子的容器

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

之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的文字动画,相当酷的动画效果. 在线预览   源码下载 实现的代码. html代码: <canvas class="canvas"></canvas> <div class="help"> ?</div> <div c

超炫的粒子效果!代码,就应该这么写!

最近瞎逛的时候发现了一个超炫的粒子进度效果,有多炫呢?请擦亮眼镜! 粗略一看真的被惊艳到了,而且很实用啊有木有!这是 Jack Rugile 写的一个小效果,源码当然是有的.聪慧如你,肯定觉得这个东西so easy 要看啥源码,给我3分钟我就写出来了吧.所以你的思路可能是: 1)进度条的实现没什么好说的,简单的一个 fillRect(0,0,long,20),long和20是分别进度条的长宽.然后每帧动画调用前将画布清除clearRect(0,0,canvas.width,canvas.heig

【Android开源项目解析】RecyclerView侧滑删除粒子效果实现——初探Android开源粒子库 Leonids

前两天在微博上看到了这个侧滑删除的粒子效果,但是只有IOS的,所以心血来潮,写了个玩玩,下面简单介绍下实现的思路 项目简介 实现原理解析 代码实现 如何使用 更多参考 项目简介 先不废话,上效果图 项目地址:https://github.com/ZhaoKaiQiang/ParticleLayout 实现原理解析 其实看了那么多的关于侧滑删除的项目,再来思考这个问题,就so easy了! 咱们先分析下需求: - 侧滑手势检测 - 粒子跟手效果 - 删除状态判断 - 数据源刷新 ok,知道需求了,

粒子效果演示

<!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8> <title>粒子效果演示 </title> <meta name="description" content="HTML5/canvas demo, 500 particles to play around with." /> <met

canvas学习之粒子动画

项目地址:http://pan.baidu.com/s/1ccTptc 粒子动画意思就是把一个图片粒子画,然后使用粒子作出动画效果,主要两个问题:一个图片如何粒子化,这里面我们使用canvas的getImageData(http://web.jobbole.com/87602/),还有一个是作出轨迹,让粒子按照既定轨迹来运行,我们使用tweet.js(http://www.zhangxinxu.com/study/201612/how-to-use-tween-js.html,) 下载项目后,执

CSS3 粒子效果

css3粒子效果,粒子飘飞效果,觉得挺不错的效果.请注意,此为CSS3代码,IE浏览器看不到效果,请使用IE9或火狐浏览器,或Chrome浏览器. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>接触角测定仪</title> </head> <body> <style