<!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. Ubuntu 11.04安装arm-linux-gcc-4.4.3/arm-none-linux-gnueabi-gcc安装包

    准备工具和系统 arm-linux-gcc-4.4.3.tar.gz arm-linux-gcc-4.4.3下载地址: 下载在Linux公社的1号FTP服务器里,下载地址: FTP地址:ftp://w ...

  2. ioctl，unlocked_ioctl 处理方法

    kernel 2.6.35 及之前的版本中struct file_operations 一共有3个ioctl : ioctl,unlocked_ioctl和compat_ioctl 现在只有unloc ...

  3. freemarker报错之一

    freemarker 1.错误描述 java.io.FileNotFoundException: Template user.ftl not found. at freemarker.template ...

  4. Django学习-5-模板渲染

    1. {{ 变量名 }}                          def func(request):                     return render(request, ...

  5. hdu5788 level up

    贴下以前写的代码 比赛前我准备着重看的 主席树 树dp 字符串 #include<bits/stdc++.h> using namespace std; typedef long long ...

  6. Entity Framework Core必须牢记的三条引用三条命令

    关于EntityFramework Core有三个重要的引用和三条重要的命令,掌握以这六条,基本用Entity Framework Core就得心应手了. 引用1:Install-PackageMic ...

  7. 从零一起学Spring Boot之LayIM项目长成记（六）单聊群聊的实现

    文章传送门: https://my.oschina.net/panzi1/blog/1577007 并没有放弃博客园,只是 t-io 在 oschina发展.用了人家的框架,也得帮人家做做宣传是吧~~

  8. 内置函数：filter函数

    功能: filter函数用于过滤序列,将满足条件的元素取出来构成新的序列. 用法: filter(function, iterable) 接受两个参数,第一个函数为过滤函数(返回True后者False ...

  9. HTTP的长连接，你不知道的连接。。。

    长连接起源 什么样的连接才能称之为长连接?要多长.... http是一种无状态的协议,也就是stateless协议,而http协议又是建立在tcp/ip协议的基础之上的. 无状态表示每次请求都是一次独 ...

  10. 【编程笔记】Unity3D语言的类型系统--C#的类型系统

    几乎所有的编程语言都有自己的类型系统. 而编程语言更是常常按照其类型系统而被分为强类型语言/弱类型语言.安全类型语言/不安全类型语言.静态类型语言/动态类型语言等. 而C#的类型系统是静态.安全,并且 ...