一款由html5 canvas实现五彩小圆圈背景特效
html5 实现 一款 背景 Canvas 特效
2023-09-27 14:28:19 时间
之前介绍了好几款html5 canvas实现的特效。今天要为大家介绍一款由html5 canvas实现五彩小圆圈背景特效。五彩的小圆圈渐显渐失的特效。效果图如下:
html代码:
<canvas> </canvas> <div id="Circle"> <span>Harris Carney<span> </div>
css代码:
body { margin: 0; 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 FormData 方法介绍以及实现文件上传
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
- 利用开源HTML5引擎lufylegend.js结合javascript实现的五子棋人机对弈
- CSDN学霸课表——2017年HTML5开发者生态报告
- html5 炫酷的字幕雨
- 用jQuery Mobile做HTML5移动应用的三个优缺点
- 《Web前端开发精品课——HTML5 Canvas开发详解》——导读
- 《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 第 1 章 网络平台
- 《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.7 数据属性
- 《Web前端开发精品课 HTML与CSS进阶教程》——2.8 HTML5舍弃的标签
- 《HTML5移动Web开发实战》—— 1.9 定义一个内容策略
- 《HTML5和JavaScript Web应用开发》——第 1 章 客户端架构 1.1了解HTML5
- 《HTML5游戏编程核心技术与实战》——第1章 游戏和HTML5初探1.1 网页游戏和HTML5
- 《HTML5+JavaScript动画基础》——2.3 用代码实现动画
- 《HTML5 开发实例大全》——第1章 千里之行 始于足下——基本元素实战1.1 一个基本的HTML 5页面
- 《Windows 8 开发权威指南:HTML5 和JavaScript卷》——导读
- HTML5实现网页的全屏切换
- 《Web应用漏洞侦测与防御:揭秘鲜为人知的攻击手段和防御技术》——第1章 HTML5
- 你真的熟练运用 HTML5 了吗,这10 个酷炫的 H5 特性你会几个?
- HTML5 Canvas爱心表白动画特效
- HTML5轻松实现全屏视频背景
- [js高手之路] html5 canvas动画教程 - 匀速运动
- HTML5 FormData 方法介绍以及实现文件上传:上传文件实例、FormData 对象方法介绍
- 黄业晶致辞:HTML5已成为政企移动信息化的重要方向
- 利用html5调用本地摄像头拍照上传图片[转]
- HTML5 + CSS3 标签学习笔记(二)