一款由html5 canvas实现五彩小圆圈背景特效
之前介绍了好几款html5 canvas实现的特效。今天要为大家介绍一款由html5 canvas实现五彩小圆圈背景特效。五彩的小圆圈渐显渐失的特效。效果图如下:
html代码:
<canvas>
</canvas>
<div id="Circle">
<span>Harris Carney<span>
</div>
css代码:
body
{
margin:;
overflow: hidden;
background: #E9E9E9;
} #Circle
{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
width: 150px;
height: 150px;
border-radius: 150px;
background: url('1.jpg');
} #Circle:before
{
content: '';
position: absolute;
top: -8px;
left: -8px;
width: 162px;
height: 162px;
border-radius: 162px;
border: 2px solid #BCBCBC;
} #Circle:after
{
content: '';
position: absolute;
top: -13px;
left: -13px;
width: 172px;
height: 172px;
border-radius: 172px;
border: 2px solid #FF9900;
} #Circle span
{
position: absolute;
bottom: -60px;
display: block;
width: 150px;
text-align: center;
font-family: 'Oswald';
color: #333;
font-size: 25px;
}
js代码:
var canvas = $('canvas')[0];
var context = canvas.getContext('2d'); function Dot() {
this.alive = true;
this.x = Math.round(Math.random() * canvas.width);
this.y = Math.round(Math.random() * canvas.height);
this.diameter = Math.random() * 7;
this.colorIndex = Math.round(Math.random() * 3);
this.colorArray = ['rgba(255,153,0,', 'rgba(66,66,66,', 'rgba(188,188,188,', 'rgba(50,153,187,'];
this.alpha = 0.1;
this.color = this.colorArray[this.colorIndex] + this.alpha + ')'; this.velocity = { x: Math.round(Math.random() < 0.5 ? -1 : 1) * Math.random() * 0.7, y: Math.round(Math.random() < 0.5 ? -1 : 1) * Math.random() * 0.7 };
} Dot.prototype = {
Draw: function () {
context.fillStyle = this.color;
context.beginPath();
context.arc(this.x, this.y, this.diameter, 0, Math.PI * 2, false);
context.fill();
}, Update: function () {
if (this.alpha < 0.8) {
console.log(this.color);
this.alpha += 0.01;
this.color = this.colorArray[this.colorIndex] + this.alpha + ')';
console.log('===' + this.color);
} this.x += this.velocity.x;
this.y += this.velocity.y; if (this.x > canvas.width + 5 || this.x < 0 - 5 || this.y > canvas.height + 5 || this.y < 0 - 5) {
this.alive = false;
}
}
}; var EntityArray = []; function Initialize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight; for (var x = 0; x < 100; x++) {
EntityArray.push(new Dot());
} Update();
} function Update() {
if (EntityArray.length < 100) {
for (var x = EntityArray.length; x < 100; x++) {
EntityArray.push(new Dot());
}
} EntityArray.forEach(function (dot) {
dot.Update();
}); EntityArray = EntityArray.filter(function (dot) {
return dot.alive;
}); Draw(); requestAnimationFrame(Update);
} function Draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
EntityArray.forEach(function (dot) {
dot.Draw();
});
} $(window).resize(function () {
EntityArray = [];
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}); Initialize(); //@ sourceURL=pen.js
注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/6835
一款由html5 canvas实现五彩小圆圈背景特效的更多相关文章
- 一款基于HTML5 Canvas的画板涂鸦动画
今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...
- 基于HTML5 Canvas实现的图片马赛克模糊特效
效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...
- HTML5 Canvas 奔跑的小狗
效果如上图,共六个图像切换,形成小狗动态奔跑效果.完整代码和图片请从 https://files.cnblogs.com/files/xiandedanteng/runningDog.rar 下载. ...
- 4款基于html5 canvas充满想象力的重力特效
今天给大家分享4个物理和重力实验,用来展示 html canvas 的强大.几年前,所有这些实验都必须使用 Java 或 Flash 才能做.在下面这些惊人的例子中,就个人而言,我比较喜欢仿真布料的那 ...
- smoke.js是一款基于HTML5 Canvas的逼真烟雾特效js插件。通过该js插件,可以非常轻松的在页面中制作出各种烟雾效果。
Smoke.js 是一个浏览器默认警告系统的JavaScript替代品,如果你想要跨浏览器与平台的标准化JavaScript警告窗口,Smoke.js就是你想要的. Smoke.js是一个轻量级且灵活 ...
- 程序猿必备的10款超炫酷HTML5 Canvas插件
1.超炫酷HTML5 Canvas 3D旋转地球动画 这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球.另外我 ...
- 9款基于HTML5/SVG/Canvas的折线图表应用
1.华丽的HTML5图表 可展示实时数据 HTML5在图表应用中也十分广泛,比起以前的网页图表,HTML5图表制作更便捷,功能更强大.这款HTML5图表插件外观十分华丽和专业,在数据展示方面也很有优势 ...
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- 16个非常有趣的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
随机推荐
- CreateThread、_beginthreadex和AfxBeginThread .
创建线程好几个函数可以使用,可是它们有什么区别,适用于什么情况呢?参考了一些资料,写得都挺好的,这里做一些摘抄和整合. [参考1]CreateThread, AfxBeginThread,_begin ...
- 如何高效的阅读hadoop源代码?
个人谈谈阅读hadoop源代码的经验. 首先,不得不说,hadoop发展到现在这个阶段,代码已经变得非常庞大臃肿,如果你直接阅读最新版本的源代码,难度比较大,需要足够的耐心和时间,所以,如果你觉得认真 ...
- Ubuntu 10.04下如何查看分区的UUID
Ubuntu 10.04通过UUID来区分各个磁盘分区,在/etc/fstab配置文件中就是通过UUID来挂载分区的.UUID,英文全称为:Universally Unique Identifier. ...
- 【转载】CodeLite汉化
这几天在Ubuntu下做程序想找一个代码提示功能比较好的IDE但又不想用NETBEANS和ECLIPSE,找到CodeLite但是它是全英文的,比较晕.找了一下,下载了一个windows版的准备回去研 ...
- js unique
<script type="text/javascript"> var dataArr = [1,3,33,3,5,1,4,3,4,5]; document.write ...
- 在TFS 2013上,使用tf workspace命令删除其他用户的工作区
8月25日补充:如果想批量删除工作区,你可以使用第三方工具MSBuild Sidekick http://www.attrice.info/downloads;或者自己编写一个bat脚本,但是缺陷是需 ...
- Zookeeper监控工具
Zookeeper的常用开源监控工具可以参考:http://zqhxuyuan.github.io/2016/12/31/BigData-Monitor-Tool
- python学习笔记——爬虫的抓取策略
1 深度优先算法 2 广度/宽度优先策略 3 完全二叉树遍历结果 深度优先遍历的结果:[1, 3, 5, 7, 9, 4, 12, 11, 2, 6, 14, 13, 8, 10] 广度优先遍历的结果 ...
- Jmeter --- 逻辑控制之if控制器
一.背景 在实际工作中,当使用Jmeter做性能脚本或者接口脚本时,有可能会遇到需要对不同的条件做不同的操作,基于这种诉求,在Jmeter中可使用if控制器来实现 二.实际操作 逻辑控制器位置: 在线 ...
- inux --- 服务器性能监控
几个问题 先来看看下面几个问题: CPU.内存以及硬盘的关系是怎样的? 进程和线程是什么?有什么区别?有什么优缺点? 什么是物理内存?什么是虚拟内存?什么时候要用到虚拟内存? 什么是CPU中断?CPU ...