html5缓动下拉菜单,HTML5 Canvas鼠标跟随的缓动效果

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

var balls = [];

var numBalls = 50;

var easing = 0.05;

var mouse = {

x: canvas.width / 2,

y: canvas.height / 2

};

canvas.addEventListener('mousemove', function(evt) {

mouse.x = evt.pageX - this.offsetLeft;

mouse.y = evt.pageY - this.offsetTop;

});

function Ball() {

this.x = 0;

this.y = 0;

this.radius = 20;

this.color = 'hsla(' + Math.random() * 360 + ', 100%, 50%, 1)';

}

Ball.prototype.draw = function() {

ctx.beginPath();

ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);

ctx.fillStyle = this.color;

ctx.fill();

};

while (numBalls--) {

balls.push(new Ball());

}

function move(ball, i) {

if (i === 0) {

var vx = (mouse.x - ball.x) * easing;

var vy = (mouse.y - ball.y) * easing;

} else {

var ballA = balls[i - 1];

var vx = (ballA.x - ball.x) * easing;

var vy = (ballA.y - ball.y) * easing;

}

ball.x += vx;

ball.y += vy;

}

(function loop() {

requestAnimationFrame(loop);

ctx.clearRect(0, 0, canvas.width, canvas.height);

balls.forEach(function(ball, i) {

move(ball, i);

ball.draw();

})

}());

html5缓动下拉菜单,HTML5 Canvas鼠标跟随的缓动效果相关推荐

html 下拉框字体,怎么把select下拉菜单里的文字设置成左右滚动效果
原标题:怎么把select下拉菜单里的文字设置成左右滚动效果希望用marquee标签来设置字体滚动,代码是下面这样写的,但是没有效果,字体还是不会滚动,应该怎么来写,才会实现这个效果呢? " ...
html5 移动端下拉菜单,react实现移动端下拉菜单的示例代码
前言项目中要实现类似与vant的DropdownMenu:下拉菜单.看了vans 的效果其实也没什么难度,于是动手鲁了一个这样的组件. 项目的技术栈为react全家桶+material UI + ...
html5中三级下拉菜单实现案例
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8" ...
html鼠标经过自动下拉菜单,js css鼠标悬停显示下拉菜单
个人信息维护学生信息修改修改密码--%> 修改密码--%> 修改密码--%> 退出登录用户: 所在班级: js文件 //个人信息维护下拉菜单样式 $(function () { ...
php实现鼠标悬停显示下拉菜单,Html中鼠标悬停显示二级菜单的两种方法
Windows Phone 8.1中处理后退键的HardwareButtons.BackPressed事件在WP8中,处理后退键比较简单,重写OnBackKeyPress事件即可.如经常用的双击后退 ...
下拉菜单，防鼠标反复触发
$(function(){ var timeId = null; $('.thisMan').mouseenter(function(){ var _this = $(this); timeId = ...
左侧栏下拉框HTML代码,html5下拉菜单代码
html5如何实现文本框下拉选项功能使用html5或者jQuery如何实现文本框下拉效果,如下图 CSS布局HTML小编今天和大家分享大神详解最好有可以使用HTML5 list 属性.list 属性 ...
html鼠标滑过带音效,html5 + css3 带音效下拉菜单的实现
原文:scripts tutorials (来自脚本教程网的教程,翻译可能有些不对...想要试试音效下拉菜单在这个教程中我们将讲述如何开发酷炫的音效下拉菜单(html5 + css3).下拉 ...
10个优秀的 HTML5 CSS3 下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

html5缓动下拉菜单,HTML5 Canvas鼠标跟随的缓动效果

html5缓动下拉菜单,HTML5 Canvas鼠标跟随的缓动效果相关推荐

最新文章

热门文章