html5 canvas画彩虹,HTML5 Canvas彩虹连接点动画
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
let max_particles = 300;
let particles = [];
let frequency = 100;
let init_num = max_particles;
let max_time = frequency*max_particles;
let time_to_recreate = false;
// Enable repopolate
setTimeout(function(){
time_to_recreate = true;
}.bind(this), max_time)
// Popolate particles
popolate(max_particles);
var tela = document.createElement('canvas');
tela.width = $(window).width();
tela.height = $(window).height();
$("body").append(tela);
var canvas = tela.getContext('2d');
class Particle{
constructor(canvas, options){
let colors = ["#feea00","#a9df85","#5dc0ad", "#ff9a00","#fa3f20"]
let types = ["full","fill","empty"]
this.random = Math.random()
this.canvas = canvas;
this.progress = 0;
this.x = ($(window).width()/2) + (Math.random()*200 - Math.random()*200)
this.y = ($(window).height()/2) + (Math.random()*200 - Math.random()*200)
this.w = $(window).width()
this.h = $(window).height()
this.radius = 1 + (8*this.random)
this.type = types[this.randomIntFromInterval(0,types.length-1)];
this.color = colors[this.randomIntFromInterval(0,colors.length-1)];
this.a = 0
this.s = (this.radius + (Math.random() * 1))/10;
//this.s = 12 //Math.random() * 1;
}
getCoordinates(){
return {
x: this.x,
y: this.y
}
}
randomIntFromInterval(min,max){
return Math.floor(Math.random()*(max-min+1)+min);
}
render(){
// Create arc
let lineWidth = 0.2 + (2.8*this.random);
let color = this.color;
switch(this.type){
case "full":
this.createArcFill(this.radius, color)
this.createArcEmpty(this.radius+lineWidth, lineWidth/2, color)
break;
case "fill":
this.createArcFill(this.radius, color)
break;
case "empty":
this.createArcEmpty(this.radius, lineWidth, color)
break;
}
}
createArcFill(radius, color){
this.canvas.beginPath();
this.canvas.arc(this.x, this.y, radius, 0, 2 * Math.PI);
this.canvas.fillStyle = color;
this.canvas.fill();
this.canvas.closePath();
}
createArcEmpty(radius, lineWidth, color){
this.canvas.beginPath();
this.canvas.arc(this.x, this.y, radius, 0, 2 * Math.PI);
this.canvas.lineWidth = lineWidth;
this.canvas.strokeStyle = color;
this.canvas.stroke();
this.canvas.closePath();
}
move(){
this.x += Math.cos(this.a) * this.s;
this.y += Math.sin(this.a) * this.s;
this.a += Math.random() * 0.4 - 0.2;
if(this.x < 0 || this.x > this.w - this.radius){
return false
}
if(this.y < 0 || this.y > this.h - this.radius){
return false
}
this.render()
return true
}
calculateDistance(v1, v2){
let x = Math.abs(v1.x - v2.x);
let y = Math.abs(v1.y - v2.y);
return Math.sqrt((x * x) + (y * y));
}
}
/*
* Function to clear layer canvas
* @num:number number of particles
*/
function popolate(num){
for (var i = 0; i < num; i++) {
setTimeout(
function(x){
return function(){
// Add particle
particles.push(new Particle(canvas))
};
}(i)
,frequency*i);
}
return particles.length
}
function clear(){
// canvas.globalAlpha=0.04;
canvas.fillStyle='#111111';
canvas.fillRect(0, 0, tela.width, tela.height);
// canvas.globalAlpha=1;
}
function connection(){
let old_element = null
$.each(particles, function(i, element){
if(i>0){
let box1 = old_element.getCoordinates()
let box2 = element.getCoordinates()
canvas.beginPath();
canvas.moveTo(box1.x,box1.y);
canvas.lineTo(box2.x,box2.y);
canvas.lineWidth = 0.45;
canvas.strokeStyle="#3f47ff";
canvas.stroke();
canvas.closePath();
}
old_element = element
})
}
/*
* Function to update particles in canvas
*/
function update(){
clear();
connection()
particles = particles.filter(function(p) { return p.move() })
// Recreate particles
if(time_to_recreate){
if(particles.length < init_num){ popolate(1);}
}
requestAnimationFrame(update.bind(this))
}
update()
html5 canvas画彩虹,HTML5 Canvas彩虹连接点动画相关推荐
- html5 canvas 画阿迪达斯logo,canvas绘图画出了的美团LOGO
接下来是用HTML新标签canvas绘图画出了的美团LOGO. canvas练习 var canvas=document.getElementById('myfirstcanvas'); canvas ...
- canvas 画点_css+canvas 随便画一个星空
今天躺在床上刷抖音的时候,看见了一个马克笔随便画星空的视频,很有意思. 先看效果: 开始需求分析: 1.渐变色的背景 2.画一颗树和一些草 3.水面的倒影 4.随便画点星星 5.画一颗流星 1.渐变色 ...
- html5 svg画钟表,html5 svg创意卡通粒子时钟动画特效
非常简单可爱的一款html5 svg绘制的创意卡通粒子时钟动画特效,时钟走动指针动画非常有意思. 查看演示 下载资源: 12 次 下载资源 下载积分: 20 积分 js代码 // Utilities ...
- 用canvas画一个炫酷的粒子动画倒计时
前言
- HTML5 canvas画圆
今天就给大家演示一下使用canvas画圆 var canvas = document.getElementById("canvas"); canvas.width = 500; c ...
- html5 Canvas画图教程(5)—canvas里画曲线之arc方法
本文转自:http://www.jb51.net/html5/70317.html 在canvas画线条这篇文章中,我讲了画直线的方法,按理这篇画曲线的文章早该发了,但由于canvas画曲线比较特殊, ...
- HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js 1 if (window.CanvasRenderi ...
- html5垂直线怎么画,HTML5 Canvas画线技巧
正统的HTML5 Canvas中如下代码 复制代码代码如下: ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(3 ...
- html5两条直线,Html5新特性用canvas标签画多条直线附效果截图
下面例子为用canvas标签画多条直线 复制代码代码如下: index_three 您的浏览器不支持canvas标签. //获取Canvas对象(画布) var canvas = document.g ...
- 毛边效果 html,Html5中Canvas画线有毛边如何解决
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...
最新文章
- 《数据科学:R语言实现》——3.9 排列数据
- leetcode 528. Random Pick with Weight
- asp.net发布到IIS中出现错误:处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler”...
- Spring Session - 使用Spring Session从零到一构建分布式session
- Java程序员应该收藏的书籍
- How is parsed BeanDefinition registered
- JS 中的事件冒泡与捕获
- OJ1026: 字符类型判断
- Ubuntu 禁用 触摸板
- Electron 遭封杀,Web 开发者在苹果平台上举步维艰!
- AD555计算机辅助设计,震旦Aurora AD555 驱动
- 在现有Fabric 2.2.0 网络上设置和运行Caliper性能测试 实战
- Linux中RAID与LVM磁盘列阵技术的使用
- python绘制各种摆线(包括心形线星形线等,超炫酷)
- Windows10 mysql解决MySQL服务无法启动 系统出错 发生系统错误 1067
- (3)网页视频获取下载案例3
- [LaTeX] 调整参考文献的格式(References),包括作者名缩写,行距,字体,引用顺序等等
- [LOJ 5516]无聊的数对
- 使用Delphi进行相机访问
- 百度地图API基础操作--百度鹰眼篇
热门文章
- python偶数统计_Python中查询后的偶数总数
- sgu244:Height, Bisector and Median(几何)
- 启动计算机按住del不放,电脑开机需要按del进入系统怎么办
- 客户想要 VS 客户预算
- java中级程序员全面学习路线教程
- 计算机sci检索,SCI/EI检索的国内计算机期刊
- linux: It seems that scikit-learn has not been built correctly.
- 基于Android的医院挂号系统设计与实现(MySQL+Spring Boot+MyBatis+Android Studio+IDEA)
- 全球首个CTLA-4抑制剂逸沃在中国上市;全球首个原发性轻链型淀粉样变治疗药物兆珂速在华获批 | 医药健闻...
- Ant Design Pro从零到一(认识AntD)