首页 > 代码库 > 一款由html5 canvas实现五彩小圆圈背景特效
一款由html5 canvas实现五彩小圆圈背景特效
之前介绍了好几款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 canvas实现五彩小圆圈背景特效
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。