以前经常看到文字流特效,今天研究下原理其实很简单。
主要利用H5画布,通过js勾勒渲染,具体步骤详解已在代码里注释出来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字雨滴效果</title> <style type="text/css"> *{padding:0;margin:0} html{overflow:hidden} </style> </head> <body> <div id="test"></div> <br> <input onclick="operateAnimation(this)" id="operate" type="button" value="暂停" /> <br> <canvas id="canvas" style="background:#000"></canvas> <script type="text/javascript"> // window.onload = function(){ //获取画布对象 var canvas = document.getElementById("canvas"); //获取画布的上下文 var context =canvas.getContext("2d"); //获取浏览器屏幕的宽度和高度,这里控制显示的宽度和高度,且涵盖所有浏览器 */ var W = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var H = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //c.width = 300; //c.height = 300; //ctx.fillStyle = "1cba9c"; //ctx.fillRect(0,0,100,100); //ctx.fillStyle = "ecb69c"; //ctx.fillText("雨滴",10,90); //设置canvas的宽度和高度 canvas.width = W; canvas.height = H; //每个文字的字体大小 var fontSize = 16; //计算列 var colunms = Math.floor(W /fontSize); //Math.floor() === 向下取整 //记录每列文字的y轴坐标 var drops = []; //给每一个文字初始化一个起始点的位置 for(var i=0;i<colunms;i++){ drops.push(0); } console.log(drops) //运动的文字 var str ="显示的运动字体"; //4:fillText(str,x,y);原理就是去更改y的坐标位置 //绘画的函数 function draw(){ //黑BG的帆布 //半透明BG显示轨迹 context.fillStyle = "rgba(0,0,0,0.05)"; context.fillRect(0,0,W,H); //给字体设置样式 context.font = "700 "+fontSize+"px 微软雅黑"; //给字体添加颜色 context.fillStyle ="#00cc33";//可以rgb,hsl, 标准色,十六进制颜色 ////循环字体---写入画布中 for(var i=0;i<colunms;i++){ //随机汉字打印 var index = Math.floor(Math.random() * str.length); //Math.random()方法可返回介于 0 ~ 1 之间的一个随机数 //index为随机整数 var x = i*fontSize;//x坐标 var y = drops[i] *fontSize;//y坐标 context.fillText(index,x,y); //如果要改变时间,肯定就是改变每次他的起点 //在屏幕上划线后,把它的顶部随机发送到顶部 //将一个随机性添加到复位中,使分散在轴上的下降 if(y >= canvas.height && Math.random() > 0.99){ drops[i] = 0; } //增加的Y坐标 drops[i]++; } }; draw(); var intervalId = setInterval(draw,30); // 测试效果开始/暂停 function operateAnimation(objBtn){ var operate = document.getElementById("operate"); if(objBtn.value == "开始"){ objBtn.value = "暂停"; intervalId = setInterval(draw,30); }else{ objBtn.value = "开始"; clearInterval(intervalId); } return false; } // }; </script> </body> </html>
拓展:
(一)获取浏览器屏幕的宽度和高度
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
所以这里我为了涵盖所有浏览器,将获取方法均列出来
(二)setInterval(翻译为set设置Interval间隔)
setIntervalsetInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
<input type="text" id="clock" size="35" /> <script language=javascript> var int=self.setInterval("clock()",1000) function clock() { var t=new Date() document.getElementById("clock").value=t } </script> <button onclick="int=window.clearInterval(int)">Stop interval</button>
【与setTimeout的使用区别】
这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。
(方 法):
实际上,setTimeout和setInterval的语法相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。
不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码。
(3)Math.floor() === 向下取整
(4)Math.random()方法可返回介于 0 ~ 1 之间的一个随机数
(5)clearInterval(翻译为清除clear间隔interval)
①clearInterval():取消由 setInterval() 设置的 timeout
②setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式。该方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 该方法返回的 ID 值可用作 clearInterval() 方法的参数。
.
相关推荐
这个“html5 canvas炫酷线条动画特效.zip”压缩包包含了一个利用Canvas API创建的线条动画特效,它展示了HTML5的强大功能,并结合了jQuery库来简化JavaScript的处理。 首先,Canvas API是HTML5的一个核心特性,它...
这些特效通常基于CSS3、JavaScript和HTML5的Canvas等核心特性,使得文本不再仅仅是静态的信息展示,而是变成了交互式、动态的艺术作品。 在描述中提到的"在鼠标hover或点击文字时制作出各种神奇的动画效果",这表明...
它提供了丰富的绘图API,包括绘制路径、矩形、圆形、图像以及文字等。开发者可以通过修改坐标、颜色、透明度等属性来实现动态效果。 3. **Canvas动画原理** 动画效果通常是通过在每一帧更新画布上的内容来实现的。...
粒子动画是一种流行的设计趋势,它通过生成大量小元素(在本例中是文字)来创建动态视觉效果。这些粒子以特定的模式和速度移动,形成或消失,营造出浪漫和梦幻的氛围。HTML5的Canvas API是实现这种效果的关键,...
总结来说,"canvas特效"是关于利用HTML5 Canvas和Three.js库创造炫酷的3D字体视觉效果。通过Canvas的文本绘制功能和Three.js的3D图形处理能力,开发者可以构建出引人入胜的交互式界面,比如这里的金光特效。这种技术...
6. **CSS**:在本项目中,`css`文件可能用于控制非3D元素的样式,比如文字、按钮等,以及调整整体布局和页面元素的定位,使其与3D背景和谐共存。 7. **JavaScript**:`js`文件包含了核心的动画逻辑和Three.js脚本。...
在这个案例中,我们将讨论如何结合Vue和Canvas来创建一个炫酷的时钟倒计时插件,并且这个插件已经发布到了npm,适配Vue 2,方便开发者直接使用。 首先,实现这个炫酷时钟倒计时效果的核心是Canvas的动画原理。通过...
Particles.js就是这样一个利用Canvas API创建炫酷粒子动画的JavaScript库,它为开发者提供了一个简单易用的接口,用于生成自定义的粒子效果。 Particles.js的核心在于它的粒子系统。粒子系统是由大量小粒子组成,每...
Canvas提供了一个二维绘图环境,通过JavaScript可以在这个画布上绘制图像、文字、形状等,实现动态效果。在这个项目中,Canvas被用来绘制液态金属的每一帧画面,通过不断更新图像内容,实现动画效果。 接着,WebGL...
4. 黑客入侵:这种特效通常用于模拟黑客攻击或数据传输场景,通过动态的文字滚动和闪烁,营造紧张刺激的氛围。 5. 雨滴:模拟雨水滴落的效果,通过在页面上随机生成并下落的元素,营造出宁静或忧郁的环境,对网页的...
粒子效果是一种流行的视觉技术,通常使用canvas元素或者WebGL来实现。在这个进度条中,粒子可能被随机生成并在屏幕上飞舞,当进度条增加时,粒子会聚集在进度条上,形成一种动态过渡的效果。这种效果既吸引人又可...
例如,`<header>`、`<nav>`、`<article>`和`<footer>`等语义化元素帮助定义页面内容结构,而`<canvas>`元素则允许动态图形和交互式内容的创建。此外,HTML5的离线存储功能(如AppCache)和Web Workers API支持后台...
"H5自定义彩色粒子文字特效"正是利用这一特性,实现了炫酷的文字动画,为网页增加互动性和视觉吸引力。 1. HTML5 Canvas基础: HTML5 Canvas是一个二维绘图API,通过JavaScript来控制画布上的图形。开发者可以使用...
5. **HTML5 Canvas粒子效果文字动画特效**: 这个特效可能是通过Canvas生成大量粒子,每个粒子代表一个字符,然后通过调整粒子的位置、颜色和大小,形成动态的文字效果。 6. **HTML5 Canvas雷达扫描动画特效**: 雷达...
例如,利用CSS3与JS结合,可以创建炫酷的文字流动或打字机效果。 3. **鼠标特效**:鼠标特效是通过监听鼠标的移动、点击等事件,实现特定的反馈效果。比如,鼠标悬停时改变元素样式、鼠标跟随效果、点击触发的动画...
本资源“JavaScript精彩网页特效实例精粹”聚焦于通过JavaScript实现的各种炫酷效果,旨在帮助开发者提升网页的用户体验和视觉吸引力。下面将详细探讨其中涉及的知识点: 1. **文本特效**:JavaScript可以改变文本...