彩色点缀,canvas炫彩小球样式背景

canvas炫彩小球样式背景

效果展示

代码如下

1.css

* {margin: 0;padding: 0;
}.backCanvas canvas {display: block;margin: 5px auto;
}.backCanvas {position: absolute;left: 5px;top: 5px;}

2.js

function init(obj){obj.size = parseInt(obj.size)obj.distance = parseInt(obj.distance)obj.space = parseInt(obj.space)obj.number = parseInt(obj.number)if(obj.size === undefined || obj.size === '' ){obj.size = 5} if (obj.distance === undefined || obj.distance === '') {obj.distance = 150}if (obj.space === undefined || obj.space === '') {obj.size = 10}if (obj.number === undefined || obj.number === '') {obj.size = 30}var canvas = document.getElementById('myCanvas')var ctx = canvas.getContext('2d')canvas.width = document.documentElement.clientWidth - 30canvas.height = document.documentElement.clientHeight - 30var ballArr = []var colorRandom = []//自定义颜色组件function getRandomColor() {var allType = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f'var allTypeArr = allType.split(',')var color = '#'for (let i = 0; i < 6; i++) {var index = parseInt(Math.random() * allTypeArr.length)color += allTypeArr[index]}colorRandom.push(color)}for (var i = 0; i < 100; i++) {getRandomColor()window.sessionStorage.setItem('colorRandom', colorRandom)}var getColorList = window.sessionStorage.getItem('colorRandom')getColorList = getColorList.split(',')//定义小球对象function ball() {this.x = parseInt(Math.random() * canvas.width)this.y = parseInt(Math.random() * canvas.height)this.r = obj.sizevar getColorindex = parseInt(Math.random() * 100)console.log(getColorindex);this.color = getColorList[getColorindex]this.dx = parseInt(Math.random() * 10) - 5this.dy = parseInt(Math.random() * 10) - 5ballArr.push(this)this.index = ballArr.length - 1}for (var i = 0; i < obj.number ; i++) {new ball()}ball.prototype.render = function () {ctx.beginPath()ctx.globalAlpha = 1;ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false)ctx.fillStyle = this.colorctx.fill()for (var i = this.index; i < ballArr.length; i++) {if (Math.abs(ballArr[i].x - this.x) < obj.distance && Math.abs(ballArr[i].y - this.y) < obj.distance) {var getColorindex = parseInt(Math.random() * 100)ctx.strokeStyle = getColorList[getColorindex]ctx.globalAlpha = 10 / Math.sqrt(Math.pow(ballArr[i].x - this.x, 2) + Math.pow(ballArr[i].y - this.y, 2));ctx.beginPath()ctx.moveTo(this.x, this.y)ctx.lineTo(ballArr[i].x, ballArr[i].y)ctx.closePath()ctx.stroke()}}}ball.prototype.update = function () {this.x += this.dxthis.y += this.dyif (this.x < this.r || this.x > canvas.width - this.r) {this.dx = -this.dx}if (this.y < this.r || this.y > canvas.height - this.r) {this.dy = -this.dy}}setInterval(function () {ctx.clearRect(0, 0, canvas.width, canvas.height);for (var i = 0; i < ballArr.length; i++) {ballArr[i].update()ballArr[i].render()}}, obj.space)}

1.html


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="./ball.css" rel="stylesheet"></head><body style="background-color: #000;"><div class="backCanvas"><canvas id="myCanvas"></canvas></div>
</body>
<script src="./ball02.js"></script>
<script>var list = {number: 150, //小球的个数size: 2, // 小球的大小distance: 100, //小球之间的多少距离 可以练成线space: 25 //小球的运动速度}init(list)
</script></html>

彩色点缀,canvas炫彩小球样式背景相关推荐

超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等...
超多经典 canvas 实例普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...
Canvas跟随鼠标炫彩小球
跟随鼠标炫彩小球 canvas没有让我失望,真的很有意思实现效果超级炫酷实现原理创建小球给小球添加随机颜色,随机半径鼠标移动通过实例化,新增小球通过调用给原型新增的方法,来实现小球的动画 ...
canvas炫酷3d网页背景动画js特效
下载地址canvas画布实现的炫酷3d网页背景动画特效 dd:
canvas制作点击/鼠标移动炫彩小球效果
<script>const canvas = document.getElementById('myCanvas')canvas.setAttribute('width', documen ...
html炫彩背景,炫彩背景生成器(Background Generator)
Background Generator(炫彩风格背景生成器),bggenerator推出了桌面版,可以直接在Windows上安装运行使用了,方便不喜欢直接使用浏览器用网页版的朋友,界面提供了中文界面 ...
canvas教程7-炫彩小球
文章目录一.炫彩小球二.效果图篇章一.炫彩小球 <!DOCTYPE html> <html lang="en"> <head><m ...
炫彩界面库UI设计器分享, 集成开发环境,C++,易语言
炫彩在线帮助文档炫彩UI截图炫彩IDE UI设计器截图炫彩webUI 炫彩缓动炫彩易语言火山PC例子截图简介炫彩界面库–软件界面开发框架,让用户快速开发桌面软件变的简单高效;功能 ...
@description iPhoneX炫彩渐变背景实现
/*** @author zhangxinxu(.com)* @description iPhoneX炫彩渐变背景实现* @link http://www.zhangxinxu.com/wordpre ...
平面设计背景素材|打造超酷的炫彩光束光效海报！
光效素材背景的作用就是瞬间让我们的设计变的高档.大气.上档次. 适用于高清背景特效.特效合成.平面海报等设计. 更多素材到素材路上 www.sucai63.com 必将带来惊喜效果! 星光点缀数码线条 ...

彩色点缀,canvas炫彩小球样式背景

canvas炫彩小球样式背景

效果展示

代码如下

彩色点缀,canvas炫彩小球样式背景相关推荐

最新文章

热门文章