html量子效果,HTML5/Canvas量子隐形传输动画
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d');
let context = ctx;
let width = window.innerWidth;
let height = window.innerHeight;
let centerX = width * 0.5;
let centerY = height * 0.5;
let mainColor = '#0F76E6';
let secondaryColor = '#CF00EA';
canvas.width = width;
canvas.height = height;
const MAX_VELOCITY = 10;
const MAX_LINE_WIDTH = 1;
const MAX_SIZE = Math.max(centerX + 300, centerY + 300);
let objsNum = 250;
let objs = [];
function init() {
if (!objs.length) {
for (var i = 0; i < objsNum; i++) {
objs.push(newObj(i))
}
}
}
function animate() {
window.requestAnimationFrame(animate);
render();
}
function render() {
ctx.clearRect(0, 0, width, height);
for (var i = 0, l = objs.length; i < l; i++) {
let o = objs[i];
if (o.s > MAX_SIZE && !o.locked) {
o.c = mainColor;
o.d = -1;
o.locked = true;
} else if (o.s < 0) {
o.c = secondaryColor;
o.d = 1;
o.locked = false;
}
drawHex(o);
ctx.beginPath();
ctx.rect(o.x + random(-o.s, o.s), o.y + random(-o.s, o.s), 5 * Math.sin(o.s * 2 * Math.PI / o.nS), 5);
ctx.stroke();
o.s += o.v * o.d;
}
}
function drawHex(o) {
ctx.beginPath();
ctx.moveTo(o.x + o.s * Math.cos(o.r), o.y + o.s * Math.sin(o.r));
for (let i = 1; i <= o.nS; i += 1) {
let angle = (i * 2 * Math.PI / o.nS) + o.r;
ctx.lineTo(o.x + o.s * Math.cos(angle), o.y + o.s * Math.sin(angle));
}
ctx.strokeStyle = o.c;
ctx.lineWidth = o.lW;
ctx.stroke();
}
function newObj(i) {
return {
i,
nS: random(8, 15),
s: random(5, 50),
x: centerX,
y: centerY,
c: secondaryColor,
r: random(0, MAX_SIZE + 1),
v: random(0.5, MAX_VELOCITY),
lW: random(1, MAX_LINE_WIDTH),
d: 1
}
}
animate();
init();
function random(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
html量子效果,HTML5/Canvas量子隐形传输动画相关推荐
- html 画动画效果,html5 canvas绘制曲线动画特效
特效描述:html5 canvas绘制 曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...
- html5波浪效果,html5 canvas粒子波浪动画特效
特效描述:html5 canvas 粒子波浪动画特效.html5基于canvas绘制波涛汹涌的粒子波浪动画. 代码结构 1. HTML代码 'use strict'; var FastRandom = ...
- html5的canvas动画效果,HTML5 Canvas:制作动画特效
要在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果.这其实是一种视觉欺骗,原理就像播放电影一样,胶片上每一格是一帧图片,然 ...
- html5 雨滴效果,html5 canvas下雨滴掉落动画特效
特效描述:html5 canvas 雨滴掉落动画 动画特效.html5 canvas绘制下雨场景动画.雨滴动画. 代码结构 1. 引入JS 2. HTML代码 // TO DO // Remove r ...
- 吓人代码html,HTML5 canvas幽灵鬼魂动画代码 (吓人的效果)
[实例简介] [实例截图] [核心代码] HTML5 canvas幽灵鬼魂动画代码 - 源码之家 canvas { position: fixed; top: 0; left: 0; } var bl ...
- html5刮彩效果,HTML5 Canvas炫酷彩虹色波浪线动画特效代码
效果图 JS源码 var c = document.querySelector('.c') , w , h , ctx = c.getContext('2d') , x0, y0, x, y, t = ...
- HTML5 Canvas核心技术:图形.动画与游戏开发
<HTML5 Canvas核心技术:图形.动画与游戏开发> 基本信息 原书名:Core HTML5 Canvas: Graphics, Animation, and Game Develo ...
- html5 水效果图,HTML5 canvas水波纹动画插件waterrippleeffect.js
插件描述:这是一款HTML5 canvas水波纹动画特效.该水波纹动画以插件的形式进行编写,可以是纯js插件,或通过jquery插件来进行调用.它能够制作出逼真的水波纹动画效果 使用方法 在页面中引入 ...
- html5 canvas基础与动画开发详解-吴华-专题视频课程
html5 canvas基础与动画开发详解-533人已学习 课程介绍 一.本课程几乎包括所有canvas常用的api用法讲解 二.包括以下案例应用: 1.坐标系绘制 2.图片裁剪与填充 ...
最新文章
- 恩智浦AI视觉组之逐飞岁末彩蛋
- linux学习笔记(软件包管理)
- 天的各种书法_寒假书法集训|小考拉硬笔书法班招募中
- 远程桌面与远程协助的区别mstsc /console
- 通过VNC Viewer连接CentOS 6.9
- DB2新建编目及删除编目
- [渣译文] 使用 MVC 5 的 EF6 Code First 入门 系列:为ASP.NET MVC应用程序使用高级功能...
- MySQL error(1449) The user specified as a definer ('usertest'@'%') does not exist
- qt设置文本背景透明_QT QWidget设置窗体透明度方法汇总
- appicon一键生成网站
- 计算机网络 华东理工大学 2020期末考试
- 华米新一代智能可穿戴芯片2020年第四季度量产
- 商业web 漏洞扫描神器———AWVS篇基础
- c++实现猜单词游戏
- 算法设计与分析之八枚硬币问题
- flask_萧井陌视频学习(三)
- 数据结构(C语言版)第三版基础实验一
- 如何将视频转换成gif动画制作表情包
- 软链接(Soft Link,符号链接)和硬链接(Hard Link)。
- ODOO 12 设置公司基本信息
热门文章
- 微软推出 Office 365 | 历史上的今天
- 无线接收器能连服务器吗,怎么设置无线接收器 设置无线接收器的方法【图文】...
- 计算机指令系统流程图,数据通路及指令周期流程图
- 力扣123. 买卖股票的最佳时机 III
- 概率(Probability)的定义和性质
- 零编码制作报表真地可能吗?
- json字符串或者Object转list、map
- python与java前景-Python和Java就业前景对比
- 笔记本插上HDMI转VGA后,扬声器或音频孔没声音
- 为什么设置%的hight和width没有效果