- 浏览: 1091644 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
效果图:
JavaScript 代码实现:
-
JavaScript 代码实现:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;} html,body{width:100%:height:100%;overflow:hidden;} </style> </head> <body> <canvas width="1280" height="910" id="c1"></canvas> <script> var body = document.body; var canvasObj = document.getElementById("c1"); var canvas2d = canvasObj.getContext("2d"); var arr = []; var count = 300; var mouse = {}; document.onmousemove = function(evt) { var e = evt || window.event; mouse = { xx: e.clientX, yy: e.clientY } } document.onmouseleave = function() { mouse = undefined; } document.oncontextmenu = function() { return false; } function ty() { canvas2d.clearRect(0, 0, canvasObj.width, canvasObj.height); for (var i = 0; i < count; i++) { if (arr.length != count) { p = { x: Math.floor(Math.random() * body.clientWidth), y: Math.floor(Math.random() * body.clientHeight), vx: 1 - Math.random() * 2, vy: 1 - Math.random() * 2, num: 0 } } else { p = hua(arr[i]); } canvas2d.fillStyle = "deepskyblue"; canvas2d.fillRect(p.x, p.y, 2, 2); arr[i] = p; } jiance(mouse); } setInterval(ty, 10); function hua(p) { var a = p; if (p.x <= 0 || p.x >= canvasObj.width) { a.vx = -p.vx; a.x += a.vx; } else if (p.y <= 0 || p.y >= canvasObj.height) { a.vy = -a.vy; a.y += a.vy; } else { a = { x: a.x + a.vx, y: a.y + a.vy, vx: a.vx, vy: a.vy, num: 0 } } return a; } function jiance(mouse) { for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr.length; j++) { if (i != j) { var len = Math.round(arr[i].x - arr[j].x) * Math.round(arr[i].x - arr[j].x) + Math.round(arr[i].y - arr[j].y) * Math.round(arr[i].y - arr[j].y) if (len <= 5000 && arr[i].num < 6) { arr[i].num++; canvas2d.lineWidth = 0.5 - len / 2000; canvas2d.beginPath(); canvas2d.strokeStyle = "lime"; canvas2d.moveTo(arr[i].x + 2, arr[i].y + 2); canvas2d.lineTo(arr[j].x, arr[j].y); canvas2d.stroke(); } } } if (mouse) { var leng = Math.round(arr[i].x - mouse.xx) * Math.round(arr[i].x - mouse.xx) + Math.round(arr[i].y - mouse.yy) * Math.round(arr[i].y - mouse.yy); if (leng > 5000 && leng <= 20000) { arr[i].x = arr[i].x + (mouse.xx - arr[i].x) / 20; arr[i].y = arr[i].y + (mouse.yy - arr[i].y) / 20; } if (leng <= 20000) { canvas2d.lineWidth = 1; canvas2d.strokeStyle = "yellow"; canvas2d.beginPath(); canvas2d.moveTo(arr[i].x, arr[i].y); canvas2d.lineTo(mouse.xx, mouse.yy); canvas2d.stroke(); } } } } console.log("application is running!"); </script> </body> </html>
-
发表评论
-
Flex之 justify-content 和 flex-direction 的应用
2021-12-23 19:39 299flex 简介: 采用Flex布局的元素,被称为Flex容 ... -
CSS之页面元素飞入效果
2020-04-18 17:50 667效果预览: - https://www.runoob.com ... -
CSS之垂直居中
2020-04-02 10:00 338css里面用text-align:center ... -
Sass之&引用父选择器
2018-08-08 11:29 8237Sass之&引用父选择器 描述: 您可以使用&字符选 ... -
CSS之导航栏设计之 ul 之 li 标签排成一行
2019-06-04 11:11 2294在HTML页面元素设计中, 把具有相同一类功能的列表用 li ... -
HTML5/CSS3鼠标滑过图片滤镜动画效果
2017-12-21 10:54 1283HTML5/CSS3鼠标滑过图片滤镜动画效果 以前我们用CS ... -
CSS之提示框实现
2017-08-02 05:08 1923效果图: 注意以下要点: 1、提示框的箭头效果,且箭头 ... -
Responsive Web Design(自响应式网页设计)
2017-05-28 22:43 1198Responsive Web Design(自响 ... -
css 之 linear-gradient 之 进度条(progress bar)
2017-05-25 18:14 2121CSS 的 linear-gradient() 函数会创建 ... -
在 css 中使用 @font-face
2017-05-24 14:15 518@font-face 允许用户使用自定义的字体。在css中定义 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 618Jquery mouseenter() vs mouseove ... -
css:flex布局
2017-03-13 17:43 855A Complete Guide to Flexbox htt ... -
网站页面配色
2017-01-05 10:12 651导航栏,菜单栏 左侧菜单 导航,底部,选择列表 ... -
BootstrapCSS之Select
2016-10-18 17:00 1036效果图: 代码: <!-- Inclu ... -
CSS样式之带边框的 Anchor(超链接)
2016-10-08 15:19 2865效果图: HTML: <a c ... -
bootstrap css之响应式导航栏
2016-08-29 16:58 16717- 使用 Twitter Bootstrap 3 创建响应式导 ... -
CSS之 white-space : pre
2016-06-15 10:21 942在 github 的代码浏览页面,可以看到这样的 css 样式 ... -
CSS - li 元素显示在一行____ a 元素没有下横线
2016-05-27 20:44 2175原文链接: http://www.w3schools.com/ ... -
CSS - table 圆角 border radius
2016-04-29 12:08 4532效果: 代码: <!DOCTYPE htm ... -
[css - hr ] border color 横线高度和颜色
2016-04-28 10:59 3687如果设定 hr 的 border,会发现其高度会比不设置高2倍 ...
相关推荐
HTML5 Canvas绘制的粒子流动爱心形状动画特效,红色粒子组成爱心动画效果。
这是一款基于HTML5 Canvas画布绘制的矩阵粒子波浪背景动画特效,粒子波浪涌动动画效果。
一款基于html5 canvas画布制作的3D海洋粒子波浪动画特效,酷炫的波浪粒子无限延伸动画效果。
html5 canvas绘制随机流动粒子动画背景特效
html5 canvas动态的粒子文字特效
一款基于HTML5 Canvas绘制的彩色粒子丝带飘动动画特效,非常好看的粒子动画效果。
一款颇具梦幻效果的HTML5 Canvas模糊圆点粒子背景动画特效,绿色发光粒子动态网页背景特效。
html5 canvas酷炫的粒子组合文字动画特效
HTML5 Canvas彩色圆点粒子飘动动画特效,粒子元素放大缩小随机飘动网页背景动画特效,下方有详细的参数设置注释说明。
html5 canvas酷炫彩色粒子爆炸动画特效
十分好看的一款HTML5 Canvas鼠标移动圆点粒子跟随动画特效,鼠标移动圆点粒子出现并跟随鼠标指针移动,不动时圆点粒子则渐渐消失。
一款基于HTML5 Canvas绘制的酷炫棱镜粒子飞出动画特效,各种颜色的粒子小方框从四边形棱镜飞出。
html5 canvas云粒子数字时钟动画特效 html5 canvas云粒子数字时钟动画特效
HTML5 Canvas粒子效果文字动画特效.HTML5 Canvas粒子效果文字动画特效
这是一款有趣的HTML5 Canvas浮动彩色粒子背景动画特效,鼠标点击彩色粒子还会有一种驱散的动画效果。
HTML5 Canvas鼠标星星粒子特效是一款跟随鼠标星星粒子动画特效。
html5 canvas闪烁的星光粒子动画特效
HTML5 Canvas粒子火焰动画特效,
基于html5 canvas制作的粒子螺旋线条动画特效,酷炫螺旋线条动画效果。