<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>粒子字体效果</title>
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
button {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="myCanvas" style="background:black; ">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var winWidth = 0;
var winHeight = 0;
findDimensions()
function findDimensions() //函数:获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测,获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
c.height = winHeight;
c.width = winWidth;
getpoint('WWW.JUSUKEJI.COM');
// drawrect()
}
//调用函数,获取数值
window.onresize = findDimensions;
//–>
function createRect(gx, gy) { //设置小方块对象的属性,然后生成小方块
this.x = c.width * Math.random();
this.y = c.height * Math.random();
this.v = Math.random() * 4 - 2;
this.w = ~~(Math.random() * 2 + 2);
this.h = ~~(Math.random() * 2 + 2);
this.color = ['#ffff33', '#ff00cc', '#00ffff', '#9933ff'];
this.gx = gx;
this.gy = gy;
}
createRect.prototype = {
draw: function () {
// ctx.clearRect(0,0,c.width,c.height);
ctx.beginPath();
ctx.fillStyle = this.color[~~(Math.random() * 4)];
console.log()
console.log(this.x - this.w, this.y - this.h, this.w, this.h)
ctx.fillRect(this.x - this.w, this.y - this.h, this.w, this.h);
ctx.fill()
},
move: function () {
}
}
function drawrect() {
for (var i = 0; i < 500; i++) {
var rect = new createRect()
rect.draw()
}
}
function getpoint(txt) {
ctx.clearRect(0, 0, c.width, c.height);
ctx.fillStyle = "black";
ctx.font = "100px blod";
ctx.fillText(txt, c.width / 2 - ctx.measureText(txt).width / 2, c.height / 2);
// ctx.closePath()
var imgData = ctx.getImageData(0, 0, c.width - ctx.measureText(txt).width / 2, c.height);
for (var x = 0; x < imgData.width; x += 4) {
for (var y = 0; y < imgData.height; y += 4) {
var i = (imgData.width * y + x) * 4;
// console.log(x,y)
if (imgData.data[i + 3] > 0) {
// drawrect(10,20)
ctx.beginPath();
ctx.fillStyle = 'red'
ctx.fillRect(x - 2, y - 2, 2, 2);
ctx.fill()
}
}
}
// ctx.putImageData(imgData,10,70);
}
getpoint('WWW.JUSUKEJI.COM');
drawrect()
// setInterval(drawrect,30)
</script>
</body>
</html>

canvas实现将文字变成颗粒的更多相关文章

  1. HTML5 Canvas实现黑客帝国文字掉落效果

    效果: 原理: 用canvas逐行输出文字,然后让背景颜色逐渐加深,再随机中断某些列. 代码: HTML: <canvas id="c"></canvas> ...

  2. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  3. Canvas 3D球形文字云动画特效

    Canvas 3D球形文字云动画特效 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器 ...

  4. HTML5 Canvas 梦幻的文字飞扬动画教程

    之前为大家介绍了一款HTML5/CSS3 3D文字特效 文字外翻效果.今天为大家带来的是html5 canvas实现的文字漂动动画效果.画面非常梦幻. 在线预览   源码下载 实现代码如下: html ...

  5. 随便谈谈用canvas来实现文字图片粒子化

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 看了岑安大大的教程http://www.cnblogs.com/hongru/archive/2012/03/28/2420415.htm ...

  6. 基于 HTML5 Canvas 实现的文字动画特效

    前言 文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的.文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态的效果来提醒用户阅读. ...

  7. 基于HTML5 Canvas粒子效果文字动画特效

    之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的 ...

  8. 测试canvas绘制旋转文字的性能

    canvas 绘制各种动画效果时,我们经常会使用画布旋转,使绘制上去的元素有旋转的效果. 最近在项目中碰到了很严重的性能问题,经常排查发现是因为绘制批量文字时使用了画布旋转,且每行文字的旋转角度是不一 ...

  9. canvas画的文字在安卓移动设备上可以显示,但是在ios移动设备上无法显示

    不用担心iOS Safari不支持canvas,查看https://caniuse.com/ 发现是支持的 ctx.font = "0.16rem Arial"; 为了适配移动端直 ...

随机推荐

  1. scrapy 中日志的使用

    我在后台调试 在后台调试scrapy spider的时候,总是觉得后台命令窗口 打印的东西太多了不便于观察日志,因此需要一个日志文件记录信息,这样以后会 方便查找问题. 分两种方法吧. 1.简单粗暴. ...

  2. ehcache的基本使用及Spring整合

    1.ehcache:百度百科这样解释的,EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的CacheProvider.总的来说,他的出现就是减少对数据 ...

  3. python更新数据库脚本两种方法

    最近项目的两次版本迭代中,根据业务需求的变化,需要对数据库进行更新,两次分别使用了不同的方式进行更新. 第一种:使用python的MySQLdb模块利用原生的sql语句进行更新 import MySQ ...

  4. Luogu P1092 虫食算

    题目描述 所谓虫食算,就是原先的算式中有一部分被虫子啃掉了,需要我们根据剩下的数字来判定被啃掉的字母.来看一个简单的例子: 43#9865#045 +8468#6633 44445509678 其中# ...

  5. 使用tcpcopy导入线上流量进行功能和压力测试

    - 假设我们要上线一个两年内不会宕机的先进架构.在上线前,免不了单元测试,功能测试,还有使用ab,webbench等等进行压力测试. 但这些步骤非生产环境下正式用户的行为.或许你会想到灰度上线,但毕竟 ...

  6. JDBC异常之数据库表不存在

    JDBC异常之数据库表不存在 1.具体错误如下: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException:Table 'YHD.t_yhd_ ...

  7. (二十七)mongodb操作学习

    在不使用mongodbVUE图形界面工具的情况下,打开数据库和集合后,如果要:    插入一条字段名为name,内容为java的记录,可以写成x={name:"java"};,然后 ...

  8. Linux显示登录Shell信息

    Linux显示登录Shell信息 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ finger -p Login Name Tty Idle Login Tim ...

  9. Linux显示以log结尾的日志文件

    Linux显示以log结尾的日志文件 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ find -name "*.log" find: `. ...

  10. 芝麻HTTP:Python爬虫实战之爬取糗事百科段子

    首先,糗事百科大家都听说过吧?糗友们发的搞笑的段子一抓一大把,这次我们尝试一下用爬虫把他们抓取下来. 友情提示 糗事百科在前一段时间进行了改版,导致之前的代码没法用了,会导致无法输出和CPU占用过高的 ...