- 浏览: 1110871 次
文章分类
- 全部博客 (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 397flex 简介: 采用Flex布局的元素,被称为Flex容 ... -
CSS之页面元素飞入效果
2020-04-18 17:50 753效果预览: - https://www.runoob.com ... -
CSS之垂直居中
2020-04-02 10:00 436css里面用text-align:center ... -
Sass之&引用父选择器
2018-08-08 11:29 8282Sass之&引用父选择器 描述: 您可以使用&字符选 ... -
CSS之导航栏设计之 ul 之 li 标签排成一行
2019-06-04 11:11 2405在HTML页面元素设计中, 把具有相同一类功能的列表用 li ... -
HTML5/CSS3鼠标滑过图片滤镜动画效果
2017-12-21 10:54 1316HTML5/CSS3鼠标滑过图片滤镜动画效果 以前我们用CS ... -
CSS之提示框实现
2017-08-02 05:08 1961效果图: 注意以下要点: 1、提示框的箭头效果,且箭头 ... -
Responsive Web Design(自响应式网页设计)
2017-05-28 22:43 1243Responsive Web Design(自响 ... -
css 之 linear-gradient 之 进度条(progress bar)
2017-05-25 18:14 2186CSS 的 linear-gradient() 函数会创建 ... -
在 css 中使用 @font-face
2017-05-24 14:15 554@font-face 允许用户使用自定义的字体。在css中定义 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 653Jquery mouseenter() vs mouseove ... -
css:flex布局
2017-03-13 17:43 927A Complete Guide to Flexbox htt ... -
网站页面配色
2017-01-05 10:12 679导航栏,菜单栏 左侧菜单 导航,底部,选择列表 ... -
BootstrapCSS之Select
2016-10-18 17:00 1092效果图: 代码: <!-- Inclu ... -
CSS样式之带边框的 Anchor(超链接)
2016-10-08 15:19 2911效果图: HTML: <a c ... -
bootstrap css之响应式导航栏
2016-08-29 16:58 16767- 使用 Twitter Bootstrap 3 创建响应式导 ... -
CSS之 white-space : pre
2016-06-15 10:21 997在 github 的代码浏览页面,可以看到这样的 css 样式 ... -
CSS - li 元素显示在一行____ a 元素没有下横线
2016-05-27 20:44 2218原文链接: http://www.w3schools.com/ ... -
CSS - table 圆角 border radius
2016-04-29 12:08 4561效果: 代码: <!DOCTYPE htm ... -
[css - hr ] border color 横线高度和颜色
2016-04-28 10:59 3728如果设定 hr 的 border,会发现其高度会比不设置高2倍 ...
相关推荐
这个HTML5 Canvas矩阵粒子波浪背景动画特效展示了Canvas的潜力,以及如何通过JavaScript和数学原理实现复杂而引人入胜的视觉效果。学习并理解这些技术对于想要提升Web前端开发技能,特别是对游戏开发和互动设计感...
本项目“html5 canvas 3D海洋粒子波浪动画特效”正是利用这一特性,通过JavaScript编程实现了一种酷炫的3D海洋效果,营造出仿佛无尽延伸的波浪粒子动画。 在Canvas中,我们通过`context`对象提供的绘图方法,如`...
html5 canvas彩色网状线条粒子动画特效.rar html5 canvas彩色网状线条粒子动画特效.rar html5 canvas彩色网状线条粒子动画特效.rar html5 canvas彩色网状线条粒子动画特效.rar html5 canvas彩色网状线条粒子动画特效...
总的来说,这款HTML5 Canvas彩色粒子丝带飘动动画特效通过Canvas API实现了粒子的动态生成、移动和绘制,利用JavaScript编程实现了飘动的效果。它展示了HTML5在现代网页设计中的强大潜力,为用户带来生动、有趣的...
总结来说,这个"HTML5 Canvas粒子流动爱心形状动画特效"结合了Canvas的图形绘制能力、粒子系统的动态效果以及CSS的样式控制,创造出一种浪漫且引人注目的视觉体验。开发者可以通过学习和理解这个案例,深入掌握...
这款"HTML5 Canvas模糊圆点粒子背景动画特效"是利用Canvas API实现的一种交互式、动态的背景设计,其核心是通过JavaScript编程来操纵成千上万的圆点,形成流动、闪烁的效果,为网页增添一种神秘而迷人的氛围。...
在这个特定的场景中,我们讨论的是如何使用Canvas来制作一个随机流动的粒子动画背景特效。这个特效可以增加网页的视觉吸引力,为用户带来更沉浸式的浏览体验。 首先,我们要了解Canvas的基本概念。Canvas是一个HTML...
总结一下,这个项目利用了HTML5 Canvas的绘图功能,结合JavaScript实现了粒子系统和动态飞出动画,通过CSS调整了页面样式,从而在网页上创造出了一种酷炫的棱镜粒子效果。这不仅展示了HTML5技术的潜力,也为Web...
在这个场景中,我们将深入探讨如何使用HTML5 Canvas实现酷炫的粒子组合文字动画特效。 首先,我们需要在HTML页面中添加一个`<canvas>`标签,并通过JavaScript获取其上下文。通常我们使用`2d`渲染上下文,因为它提供...
在这个“html5 canvas云粒子数字时钟动画特效”中,我们看到的是Canvas技术与时间显示、粒子系统相结合的应用实例。下面将详细阐述相关知识点。 1. HTML5 Canvas API: HTML5 Canvas是一个基于矢量图形的画布,...
通过调整粒子的运动速度、颜色、大小等因素,我们可以创造出各种不同的粒子效果,如飘散、旋转、聚集等,让文字看起来像是由动态的粒子构成的。 以上就是使用HTML5 Canvas创建动态粒子文字特效的基本流程。在实际...
在这个“HTML5 Canvas鼠标移动圆点粒子跟随动画特效”中,我们看到一个创新且引人入胜的互动设计,用户可以通过鼠标移动来控制页面上的圆点粒子运动,实现了视觉与交互的完美融合。 首先,我们需要理解Canvas的基本...
在这个“html5 canvas彩色烟花粒子动画特效”项目中,开发者利用Canvas API创建了一个互动式的烟花秀,用户不仅可以欣赏到五彩斑斓的烟花绽放,还能通过右上角的设置调整动画参数,甚至通过鼠标点击触发新的烟花。...
HTML5 Canvas时光隧道3D粒子动画特效是一种利用HTML5 Canvas元素和JavaScript技术实现的动态视觉效果。Canvas是HTML5中的一个重要组成部分,它提供了一个在网页上绘制图形的API,允许开发者通过JavaScript来绘制和...
本项目“HTML5 Canvas彩色圆点粒子飘动动画特效”利用了Canvas API来创建一个动态的、视觉吸引人的背景效果,其中彩色的圆点粒子随机地放大缩小并飘动。 首先,Canvas API提供了`<canvas>`元素,它是一个可绘制二维...
这款“HTML5 Canvas浮动彩色粒子背景动画特效”利用了Canvas元素的特性,构建了一个生动且互动的背景效果。下面我们将深入探讨相关的HTML5 Canvas知识点。 1. **HTML5 Canvas基础** HTML5 Canvas是一个基于矢量...
在这个“html5 canvas粒子动画进度条加载特效”中,我们主要探讨的是如何利用Canvas API来构建一种创新的加载动画,这种动画不仅具有线条边框风格,还能以百分比形式展示加载进度。 首先,Canvas API是HTML5提供的...
在这个项目中,“HTML5+Canvas实现的超炫粒子效果文字动画特效源码”是一个利用这两种技术来创建独特视觉体验的实例。下面将详细讲解这个特效背后的原理和实现方法。 首先,HTML5是下一代超文本标记语言,它扩展了...
在本项目中,我们探讨的是如何在Vue框架中利用HTML5的Canvas元素创建一个粒子拼图特效。Vue.js是一个流行的JavaScript前端框架,它允许开发者构建用户界面,而Canvas则是一种在网页上绘制2D图形的技术。这个特效结合...
"HTML5 Canvas粒子效果文字动画特效"是一个利用Canvas API实现的创新技术,通过粒子系统来展示动态的文字动画效果。这篇文章将深入探讨如何使用Canvas实现这种特效,以及涉及到的相关技术点。 首先,Canvas API是...