Canvas 炫彩小球

Canvas 基础应用

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>* {margin: 0px;padding: 0px;}canvas {border: 1px solid #ccc;}</style></head><body><input type="number" id="ballNum"><button type="button" onclick="setBall()">设置小球半径</button><br><canvas id="mycanvas"></canvas><script>var canvas = document.getElementById('mycanvas');var ctx = canvas.getContext('2d');canvas.width = window.innerWidth - 100;canvas.height = window.innerHeight - 100;function setBall() {var num = document.getElementById('ballNum');var value = parseInt(num.value);// 创建50个小球for (var i = 0; i < 50; i++) {new Ball(value);}// 定时器动画setInterval(function() {// 清除画布ctx.clearRect(0, 0, canvas.width, canvas.height);for (var i = 0; i < 50; i++) {ballArr[i].update();ballArr[i].render();}}, 10);}function Ball(r) {// 控制小球的x,y，这样就不会超过屏幕this.x = parseInt(Math.random() * (canvas.width - r*2)) + r;this.y = parseInt(Math.random() * (canvas.height - r*2)) + r;this.r = r;this.color = getColor();// 初始速度不能为0do {this.dx = parseInt(Math.random() * 10) - 5;this.dy = parseInt(Math.random() * 10) - 5;} while (this.dx === 0 || this.dy === 0);// 把小球放入数组中存储ballArr.push(this);  // 获取小球id，连线时只连比自己大的，这样只有一条线this.index = ballArr.length - 1;}Ball.prototype.update = function() {this.x += this.dx;this.y += this.dy;// 当小球超出边界时，改变方向，并改变颜色if (this.x < this.r || this.x > (canvas.width - this.r)) {this.dx = -this.dx;this.color = getColor();}if (this.y < this.r || this.y > (canvas.height - this.r)) {this.dy = -this.dy;this.color = getColor();}// 画线逻辑for (var i = this.index; i < ballArr.length; i++) {// 如果小球的距离在一定范围内，就连线if (Math.abs(ballArr[i].x - this.x) < 150 && Math.abs(ballArr[i].y - this.y) < 150) {ctx.strokeStyle = "#000";ctx.beginPath();var len = Math.sqrt(Math.pow(ballArr[i].x - this.x, 2) + Math.pow(ballArr[i].y - this.y, 2));// 根据距离，设置线的透明度ctx.globalAlpha = 10 / len;// 根据距离，设置线的宽度ctx.lineWidth = 150 / len;ctx.moveTo(this.x, this.y);ctx.lineTo(ballArr[i].x, ballArr[i].y);ctx.closePath();ctx.stroke();}}}// 渲染小球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.color;ctx.fill();} // 随机生成颜色function getColor() {var colorStyle = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f';var colorArr = colorStyle.split(',');var color = '#';for (var i = 0; i < 6; i++) {color += colorArr[parseInt(Math.random() * colorArr.length)];}return color;}var ballArr = [];</script></body>
</html>

效果

南无阿弥陀佛，祝你新年吉祥！

Canvas 炫彩小球相关推荐

彩色点缀,canvas炫彩小球样式背景
canvas炫彩小球样式背景效果展示代码如下 1.css * {margin: 0;padding: 0; }.backCanvas canvas {display: block;margin: ...
超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等...
超多经典 canvas 实例普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...
Canvas跟随鼠标炫彩小球
跟随鼠标炫彩小球 canvas没有让我失望,真的很有意思实现效果超级炫酷实现原理创建小球给小球添加随机颜色,随机半径鼠标移动通过实例化,新增小球通过调用给原型新增的方法,来实现小球的动画 ...
canvas制作点击/鼠标移动炫彩小球效果
<script>const canvas = document.getElementById('myCanvas')canvas.setAttribute('width', documen ...
canvas教程7-炫彩小球
文章目录一.炫彩小球二.效果图篇章一.炫彩小球 <!DOCTYPE html> <html lang="en"> <head><m ...
@description iPhoneX炫彩渐变背景实现
/*** @author zhangxinxu(.com)* @description iPhoneX炫彩渐变背景实现* @link http://www.zhangxinxu.com/wordpre ...
炫彩logo粒子效果
前端开发whqet,csdn,王海庆,whqet,前端开发专家昨天我们学习了利用requestAnimationFrame优化动画控制,然后就忍不住冲动,在fork别人codepen的基础上,实现了 ...
互动媒体技术——基于p5.js实现动态图形临摹与拓展：炫彩光影的千变万化！
博文索引目录: 1. 引言 2. 临摹结果对比 3. 临摹过程 3.1 准备工作 3.2 原图规律--语言描述 3.3 原图规律--数学与代码描述 3.4 完整代码 4. 创意拓展 4.1 拓展一-- ...
【Micropython】发光二极管手工制作炫彩跑马灯
2019独角兽企业重金招聘Python工程师标准>>> 先甩锅做完后才发现最后一个灯坏了,就坏了一个灯也不好意思去找淘宝店家,大家视频凑合着看把.不过并不影响实验效果.因为这个发光 ...
炫彩界面库使用方法问题记录
1. 'ele_event' : undeclared identifier 'RegisterAll': identifier not found 在使用炫彩界面库时,如果遇到以上错误,一般是由于 ...

Canvas 炫彩小球

Canvas 基础应用

效果

Canvas 炫彩小球相关推荐

最新文章

热门文章