html 空间扭曲效果,HTML5 Canvas点阵空间塌缩交互动画
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
var canvas = document.querySelector("canvas");
var c = canvas.getContext("2d");
var w = (canvas.width = innerWidth);
var h = (canvas.height = innerHeight);
// Variables
var mouse = {
x: undefined,
y: undefined
};
var colors = [
"#0082C4",
"#00E271",
"#FFE451",
"#E21B75",
"#F27426"
];
// Event Listeners
addEventListener("mousemove", function(event) {
mouse.x = event.clientX;
mouse.y = event.clientY;
});
addEventListener("resize", function() {
w = canvas.width = innerWidth;
h = canvas.height = innerHeight;
init();
});
// Utility Functions
function randomIntFromRange(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function randomColor(colors) {
return colors[Math.floor(Math.random() * colors.length)];
}
function Dot(x, y, color) {
this.x = x;
this.y = y;
this.dx = x;
this.dy = y;
this.color = color;
this.radius = 6;
// this.distanceFromCenter = randomIntFromRange(50, 120);
}
Dot.prototype.update = function() {
var rad = 50;
var disX = mouse.x - this.x;
var disY = mouse.y - this.y;
var ds = Math.sqrt(disX * disX + disY * disY);
var angle = Math.atan2(disY, disX) ;
// var dist = rad / ds;
if (ds < rad) {
this.x += Math.cos(angle) * ds * 0.1;
this.y += Math.sin(angle) * ds * 0.1;
}
this.draw();
};
Dot.prototype.draw = function() {
c.beginPath();
c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
c.fillStyle = this.color;
c.fill();
c.closePath();
};
var dots = [];
var spacing = 20;
function init() {
dots = [];
for (var x = spacing / 2; x < w; x += spacing) {
for (var y = spacing / 2; y < h; y += spacing) {
var color = randomColor(colors);
var dot = new Dot(x, y, color);
dots.push(dot);
dot.draw();
}
}
}
function animate() {
c.clearRect(0, 0, canvas.width, canvas.height);
dots.forEach(dot => {
dot.update();
});
requestAnimationFrame(animate);
}
init();
animate();
html 空间扭曲效果,HTML5 Canvas点阵空间塌缩交互动画相关推荐
- html 穿越星空效果,html5 canvas绚丽3d星空飞行穿梭动画特效
简要教程 这是一款使用 html5 canvas和 jQuery 制作的绚丽3d星空飞行穿梭动画特效.该3d星空飞行特效模拟了飞船在宇宙星空中快速穿梭的动画场景,效果非常逼真. HTML结构 HTML ...
- html5刮彩效果,HTML5 Canvas炫酷彩虹色波浪线动画特效代码
效果图 JS源码 var c = document.querySelector('.c') , w , h , ctx = c.getContext('2d') , x0, y0, x, y, t = ...
- html 产生烟雾效果,html5 canvas抽象模糊烟雾动画特效
特效描述:html5 canvas 抽象模糊 烟雾动画特效.html5 canvas绘制彩色模糊的烟雾动画.抽象模糊的烟雾动画特效 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 vo ...
- html5标签云,TagCanvas - HTML5 Canvas技术开发的标签云动画
TagCanvas 是一个基于HTML5Canvas技术开发的标签云动画.还提供一个以jQuery插件形式实现的版本.它支持文本和图片两种格式,能够以 Sphere, hcylinder 或 vcy ...
- html5 canvas酷炫3D背景打开动画特效
html5 canvas酷炫3D背景打开动画特效 点击跳转到演示地址 点击进入资源下载地址
- HTML粒子碰撞烟花,html5 canvas漂亮的粒子烟花背景动画特效
特效描述:html5 canvas 漂亮的粒子烟花 背景动画特效.html5 canvas漂亮的粒子烟花背景动画特效 代码结构 1. HTML代码 class Vector2 { constructo ...
- html 星空效果,html5 canvas炫酷旋转银河系星空背景特效
这是一款html5 canvas炫酷旋转银河系星空背景特效.该特效通过canvas来绘制银河系星盘,并制作星系旋转的效果,非常炫酷. 使用方法 HTML结构 该旋转银河系星空背景特效的HTML结果只需 ...
- html5刮奖效果,HTML5+Canvas实战之刮奖效果
项目描述 HTML5+Canvas实战之刮奖效果,实现网页上刮奖,可以用作验证码: 可以在移动设备上和PC端网页(浏览器要支持canvas)上运行 ##使用说明 var lottery = new L ...
- html5的canvas动画效果,HTML5 Canvas:制作动画特效
要在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果.这其实是一种视觉欺骗,原理就像播放电影一样,胶片上每一格是一帧图片,然 ...
最新文章
- pythonexcelweb交互插件_来一次Python与Excel的完美交互
- arm linux 识别新硬盘_嵌入式Linux系列第13篇:USB摄像头拍照
- SPOJ3273(Treap)
- 从ipa文件中导出图片
- mapper注入失败,NoSuchBeanDefinitionException: No qualifying bean of type [com.xxx.XxxMapper] found for d
- ad file type not recognised_Java实用工具类:File工具类方法学习,可创建目录及文件...
- python正则匹配找到所有的浮点数_如何利用Python抓取静态网站及其内部资源
- 爬虫里的多线程基本使用
- ORACLE--Connect By、Level、Start With的使用(Hierarchical query-层次查询)
- 【问题解决方案】关于Python中的语句 ‘ %matplotlib inline ‘
- 认真分析mmap:what? why? how?
- Spring AOP(七)之定义切入点
- two day python基础知识
- scikit-learn中的OneHotEncoder用法
- 关闭jupyter notebook报错:python.exe-应用程序错误
- burpsuite https 社区版_BurpSuit添加CA证书拦截HTTPS通信
- 【HDOJ 5654】 xiaoxin and his watermelon candy(离线+树状数组)
- 移动通信基础(14)均衡
- 微信小程序生成二维码方法1
- win10下面搜索框无法搜索应用的解决方案