怎么在html中加入特效文字,如何使用HTML5+css3实现粒子效果文字动画特效(附完整代码)...
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发。今天我们要来分享一款基于HTML5和css3的文字特效——粒子效果文字动画特效。本篇文章给大家带来的内容是关于如何使用HTML5+css3实现粒子效果文字动画特效,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
粒子效果文字动画特效的原理
当我们拿到一段文字,可以放到ps里面放大观察,文字是由一个个很小的颜色不同的像素点绘制出来的,那么粒子效果文字动画特效需要做的就是通过降低像素数使像素点变成圆形,再拼凑出文字内容。总的来说就是通过将输入的信息转化为图片后,读取图片的像素信息,同时粗略的将图片分块,遍历每块区域中的像素点判断该块是否需要画一个粒子。
实现粒子效果文字动画特效的步骤
步骤一:文字转化为图片插入canvasfunction loadCanvas(value) {
var fontSize = 100,
width = calWordWidth(value, fontSize),
canvas = document.createElement('canvas')
canvas.id = 'b_canvas'
canvas.width = width
canvas.height = fontSize
var ctx = canvas.getContext('2d')
ctx.font = fontSize + "px Microsoft YaHei"
ctx.fillStyle = "orange"
ctx.fillText(value, 0, fontSize / 5 * 4)
getImage(canvas, ctx)
}
function getImage(canvas, ctx) {
var image = new Image()
image.src = canvas.toDataURL("image/jpeg")
image.onload = function()
}
步骤二:降低像素数var imageData = ctx.getImageData(0, 0, this.width, this.height)
var dataLength = imageData.data.length
var diff = 4
var newCanvas = document.getElementById('canvas')
var newCtx = newCanvas.getContext('2d')
for (var j = 0; j < this.height; j += diff) {
for (var i = 0; i < this.width; i += diff) {
var colorNum = 0
for (var k = 0; k < diff * diff; k++) {
var row = k % diff
var col = ~~(k / diff)
let r = imageData.data[((j + col) * this.width + i + row) * 4 + 0]
let g = imageData.data[((j + col) * this.width + i + row) * 4 + 1]
let b = imageData.data[((j + col) * this.width + i + row) * 4 + 2]
if (r < 10 && g < 10 && b < 10) colorNum++
}
if (colorNum < diff * diff / 3 * 2) {
var option = {
x: i,
y: j,
radius: 6,
color: '#fff'
}
var newBubble = new Bubble(option)
newBubble.draw(newCtx)
}
}
}
效果如图所示
【相关推荐】
如何使用css3实现图片的自动轮播特效(附完整代码)
css3的颜色线性渐变属性:几种颜色之间的平稳过渡(附完整代码)
怎么在html中加入特效文字,如何使用HTML5+css3实现粒子效果文字动画特效(附完整代码)...相关推荐
- html怎么把字做成动画效果,如何使用HTML5 css3实现粒子效果文字动画特效(附完整代码)...
摘要 腾兴网为您分享:如何使用HTML5 css3实现粒子效果文字动画特效(附完整代码),学宝,小米社区,手机管家,神州专车等软件知识,以及小学英语点读机,便利宝,startos,工资宝,玩,大将军手 ...
- ae制h5文字动画_如何使用HTML5+css3实现粒子效果文字动画特效(附完整代码)
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
- 粒子背景php,html5+canvas圆形粒子移动背景动画特效
html5+canvas圆形粒子移动背景动画特效 this.update = function () { var lastPoint = { x: _this.x, y: _this.y }; // ...
- html5 黑色圆圈,html5 css3圆形百分比加载动画特效
特效描述:html5 css3 圆形百分比 加载动画特效.html5 css3 loading加载动画,圆形百分比进度条加载动画,加载完成显示健康度检测得分情况. 代码结构 1. 引入JS 2. HT ...
- html 萤火虫特效,html5+CSS3杯子里萤火虫发光动画特效
html5+CSS3杯子里萤火虫发光动画特效 js代码 var numP = 50; TweenMax.set("#content", {transformOrigin:" ...
- html5+css3满天星星音乐背景动画特效(超炫酷)
css3满天星星音乐背景动画特效 css3属性绘制唯美的满天星星和audio MP3音乐结合背景动画特效. 作品介绍 1.网页作品简介方面 :css3属性绘制唯美的满天星星和audio MP3音乐结合 ...
- html5 照片汇聚logo,利用HTML5实现Canvas粒子汇聚文字特效
特效描述:利用HTML5实现 Canvas 粒子汇聚 文字特效.利用HTML5实现Canvas粒子汇聚文字特效 代码结构 1. HTML代码 jQuery Chinaz // WRITTEN BY T ...
- 融入动画技术的粒子效果文字动画交互应用
写在前面 本次实现的交互系统是基于粒子系统的粒子文本效果.本次课程设计主要参考代码本色一书中的内容,系统应用中运用了 <代码本色> 第一章 向量.第二章 力.第四章 粒子系统等章节的动画技 ...
- 如何用html制作一个动态烟花,利用HTML5实现庆祝2018年烟花动画特效
特效描述:利用HTML5实现庆祝2018年烟花动画特效.利用HTML5实现庆祝2018年烟花动画特效 代码结构 1. HTML代码 2018 var ctx = document.querySelec ...
最新文章
- 已经yum安装的基础上,升级编译安装git
- Apache Hadoop 3.0.0 GA版正式发布,可以部署到线上
- 如何实现开关CD-ROM
- js 数组的属性及其常用的方法
- jmeter在返回的json串中提取需要的值
- Win11修改用户名(超详细图文)
- 城域网和计算机网络区别,局域网、广域网、城域网的区别是什么
- linux服务器的外网IP查阅方式
- D-月之暗面(树形dp)
- PHP字节转换,KB换算MG、GB、TB
- ipad如何找到.开头的隐藏文件夹
- 福建农林大学计算机分数线,福建农林大学录取分数线2021是多少分(附历年录取分数线)...
- 基于python和Opencv将多张图片结合为一张图片的办法
- 酷炫RGB LED立方体 (RP2040+WS2812)
- 迅雷播放器的在线智能字幕匹配下载的字幕文件在哪里?
- Java初学者作业——为某超市设计管理系统,需要在控制台展示系统菜单,菜单之间可以完成跳转。
- 西北乱跑娃 --- windows下kill进程
- FANUC系统数据采集——第二天
- C#中的函数(也叫方法)
- 用C语言栈实现进制转换