<!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. 【SSH框架】系列之 Spring 整合 Hibernate 框架

    1.SSH 三大框架整合原理 Spring 与 Struts2 的整合就是将 Action 对象交给 Spring 容器来负责创建. Spring 与 Hibernate 的整合就是将 Session ...

  2. 两种实现方式mycat多租户,枚举分片,注解拦截

    第一种: 优点:支持进一步分片 缺点:schema配置繁琐 注解式  /*!mycat:schema=[schemaName] */   注意:这在navicat 里面是会报错的,请用命令行登陆myc ...

  3. webTest-----webUI自动化框架

    webTest框架介绍 地址 https://github.com/wuranxu/webTest 希望大家能够喜欢!!! 简介 本框架基于Python3+selenium3+unittest组成,用 ...

  4. H3C单臂路由配置

    Route配置 int g0/0.1 ip add 192.168.10.1 255.255.255.0 vlan-type dot1q vid 10 #子接口封装dot1q并分配给VLAN 10 q ...

  5. Android shape使用详解

    在android开发过程中,shape是比较常用的,用于设定控件的形状,可以在selector,layout等里面使用,有6个子标签,各属性说明如下: <?xml version="1 ...

  6. VC下ffmpeg例程调试报错处理

    tools/options/directories/include files  添加ffmpeg头文件所在路径 tools/options/directories/library files  添加 ...

  7. VxWorks启动过程详解（上）

    vxworks有三种映像: VxWorks Image的文件类型有三种 Loadable Images:由Boot-ROM引导通过网口或串口下载到RAM ROM-based Images(压缩/没有压 ...

  8. C# 利用Newtonsoft.Json进行Json序列化与反序列化

    我们可以通过DataContractJsonSerializer类来序列化一个对象为json字符串. public class JsonConvert<T> { public static ...

  9. Tornado模块

    Tornado 一个轻量级的Web框架 简介 1.Tornado在设计之初就考虑到了性能因素,旨在解决C10K问题,这样的设计使得其成为一个拥有非常高性能的框架.此外,它还拥有处理安全性.用户验证.社 ...

  10. Python与RabbitMQ交互

    RabbitMQ 消息队列 成熟的中间件RabbitMQ.ZeroMQ.ActiveMQ等等 RabbitMQ使用erlang语言开发,使用RabbitMQ前要安装erlang语言 RabbitMQ允 ...