<!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. OPENCV 旋转图像算法-汇总

      void ImgRotate(cv::Mat imgIn, float theta, cv::Mat& imgOut) { int oldWidth = imgIn.cols; int o ...

  2. C语言老司机学Python （一）

    Python 版本:3.6.4 参考网上教程:http://www.runoob.com/python3/python3-basic-syntax.html 开始了啊. 干咱们这行的老规矩,学新语言的 ...

  3. Linux基础六

    用户账号管理 基于账号身份对资源访问进行控制 账户类别:用户账号,组账号 识别方式:UID,GID 用户账号:超级用户root,系统用户,普通用户 组账号:用来区分权限,不用于登陆 基本组(私有组) ...

  4. 网络基础Cisco路由交换一

    VLAN概述 Virtual LAN(虚拟局域网)是物理设备上链接的不受物理位置限制的用户的一个逻辑组,. 引用VLAN: 交换机分割了冲突域,但是不能分割广播域,随着交换机端口数量的增多,网络中广播 ...

  5. SQL Server使用侦听器IP访问时遇到"The target principal name is incorrect. Cannot generate SSPI context"

    在测试SQL Server 2016 Always On时,在创建侦听器后,在客户端使用SSMS, 可以用侦听器名称访问Always On集群,但是使用侦听器IP访问时遇到"The targ ...

  6. LVDS/DVI/HDMI Interface

    数字视频信号 以SXGA为例,其时序如下: 垂直:         水平: 图中DSPTMG为使能信号,VSYNC为场同步信号,HSYNC为行同步信号.在行场的消隐期(T1与T7),DSPTMG为低电 ...

  7. 【mysql】mysql主从复制

    mysql主从复制配置 主服务器:192.168.0.100 从服务器 192.168.0.101 主服务器配置 my.ini(window下 linux 下是my.cnf) #开启二进制日志 log ...

  8. Caused by: java.sql.SQLException: Incorrect integer value: '' for column 'clientId' at row 41

    1.错误描述 [ERROR:]2015-06-10 13:48:26,253 [异常拦截] oa.exception.ExceptionHandler org.hibernate.exception. ...

  9. Caused by:org.hibernate.DuplicateMappingException:Duplicate class/entity/ mapping

    1.错误描述 java.lang.ExceptionInInitializerError Caused by:org.hibernate.InvalidMappingException:Could n ...

  10. JavaWeb中jdbcproperties配置文件

    开发中使用properties配置文件,方便后期维护. 文件位置: 任意,建议src下 文件名称:任意,扩展名为properties 文件内容:一行一组数据,格式“key=value” key 命名自 ...