canvas背景
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas字母喷射效果</title>
<style>
*{
margin:0;
padding:0;
}
body{
background:#000000;
overflow:hidden;
}
</style>
</head>
<body>
<canvas id=canvas></canvas>
<script> //页面命名空间 命名空间就是对象 需要用到this
var Canvas={};
Canvas.anim={
//初始化
init:function(){
var canvas=document.getElementById("canvas");
this.ctx=canvas.getContext("2d");//画笔，创建2d空间，加this相当于全局变量
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
this.letters="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
this.cw=canvas.width;
this.ch=canvas.height;
this.particles=[];
},
//执行动画
render:function(){
//粒子的属性
var particle={
//显示的位置random为随机数0-1
x:this.cw/2,
y:this.ch,
character:this.letters[Math.floor(Math.random()*this.letters.length)],
//速度值
xSpeed: (Math.random()*20)-10,
ySpeed: (Math.random()*20)-10
}
this.particles.push(particle);
this.drawParticles();
},
//绘制字母
drawParticles: function(){
this.fadeCanvas();
var particleCount=this.particles.length;
var c=this.ctx;
for(var i=0;i<particleCount;i++){
var particle=this.particles[i];
c.font="12px sans-serif";
c.fillStyle="#ffffff";
c.fillText(particle.character,particle.x,particle.y);
particle.x += particle.xSpeed;
particle.y += particle.ySpeed;
// 驶近Y轴
particle.y *= 0.97;
}
},
//清除画布
fadeCanvas: function(){
this.ctx.fillStyle = "rgba(0,0,0,0.5)";
this.ctx.fillRect(0,0,this.cw,this.ch);
}
};
Canvas.anim.init();
setInterval(function(){
Canvas.anim.render();
},13);
</script>
</body>
</html>
加入绘制字母
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas字母喷射</title>
<style>
*{
padding: 0px;
margin: 0px;
}
#canvas{
background-color:#000;
}
</style>
<body>
<canvas id="canvas"></canvas>
</body> <script>
// 页面命名空间
var Canvas = {}
Canvas.anim = {
// 初始化
init: function(){
var canvas = document.getElementById("canvas");
this.ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
this.cw = canvas.width;
this.ch = canvas.height;
// 随机字母
this.letters = "QWERTYUIOPLKJHGFDSAZXCVBNM";
// 位置
this.particles = [];
},
// 执行动画
rander: function(){
// 显示的位置
var particle = {
x: this.cw/2,
y: this.ch,
// 随机字母
character: this.letters[Math.floor(Math.random()*this.letters.length)],
// 速度值
xSpeed: (Math.random()*20)-10,
ySpeed: (Math.random()*20)-10
}
this.particles.push(particle);
this.drawParticles();
},
// 绘制字母
drawParticles: function(){
this.fadeCanvas();
var c = this.ctx;
// 喷射字母
var particleCount = this.particles.length;
for(var i=0;i<particleCount;i++){
var particle = this.particles[i];
c.font = "12px";
c.fillStyle = "#ffffff";
c.fillText(particle.character,particle.x,particle.y);
particle.x += particle.xSpeed;
particle.y += particle.ySpeed;
// 驶近Y轴
particle.y *= 0.97;
}
// 绘制名字
var fontParticleCount = Font.particles.length;
for(var i=0;i<fontParticleCount;i++){
var particle = Font.particles[i];
c.font = "12px";
c.fillStyle = "#ff00cc";
c.fillText(particle.character,particle.x,particle.y);
}
},
// 清除画布
fadeCanvas: function(){
this.ctx.fillStyle = "rgba(0,0,0,0.5)";
this.ctx.fillRect(0,0,this.cw,this.ch);
}
};
Canvas.anim.init();
var Font = {
init: function(){
this.startX = window.innerWidth/2-150;
this.startY = window.innerHeight/2-200;
this.speed = 130; // 速度值
this.smallSpace = 10; // 字母间隔
// 字母位置
this.particles = [];
},
// 执行动画
rander: function(xPoint, yPoint){
// 显示的位置
var particle = {
x: xPoint,
y: yPoint,
// 随机字母
character: "0",
}
this.particles.push(particle);
},
// 画I
draw_i: function(callback){
var _this = this;
var width=40,height=100;
// 画-
var draw_1 = function(){
var i = 0;
var intVal = setInterval(function(){
i++;
_this.rander(_this.startX+_this.smallSpace*i,_this.startY);
if(_this.smallSpace*i >= width){
clearInterval(intVal);
draw_2();
}
},_this.speed);
}
// 画|
var draw_2 = function(){
var i = 0;
var intVal = setInterval(function(){
i++;
_this.rander(_this.startX+width/2+_this.smallSpace/2,_this.startY+_this.smallSpace*i);
if(_this.smallSpace*i >= height){
clearInterval(intVal);
draw_3();
}
},_this.speed);
}
// 画-
var draw_3 = function(){
var i = 0;
var intVal = setInterval(function(){
i++;
_this.rander(_this.startX+_this.smallSpace*i,_this.startY+height+_this.smallSpace);
if(_this.smallSpace*i >= width){
clearInterval(intVal);
callback();
}
},_this.speed);
}
draw_1();
},
// 画心形
draw_v: function(callback){
var _this = this;
var v_startX = _this.startX;
var v_startY = _this.startY;
var width=80,height=100;
// 凹度,高
var concave = 15;
// 斜边，宽高
var hypotenuseWidth = 20;
var hypotenuseHeight = 100;
var draw_1 = function(){
var i = 0;
_this.rander(v_startX,v_startY+concave);
var intVal = setInterval(function(){
i++;
// 每次偏移量
var y = concave/(width/2/_this.smallSpace)*i;
_this.rander(v_startX-_this.smallSpace*i,v_startY+concave-y);
if(_this.smallSpace*i >= width/2){
v_startX = v_startX-_this.smallSpace*i;
v_startY = v_startY+concave-y;
clearInterval(intVal);
draw_2();
}
},_this.speed);
}
var draw_2 = function(){
var i = 0;
var intVal = setInterval(function(){
i++;
// 每次偏移量
var y = hypotenuseHeight/_this.smallSpace*i;
_this.rander(v_startX-_this.smallSpace*i,v_startY+y);
if(_this.smallSpace*i >= hypotenuseWidth){
v_startX = v_startX-_this.smallSpace*i;
v_startY = v_startY+y;
clearInterval(intVal);
draw_3();
}
},_this.speed);
}
var draw_3 = function(){
var i = 0;
var intVal = setInterval(function(){
i++;
// 每次偏移量
var x = (width/2+hypotenuseWidth)/_this.smallSpace*i;
_this.rander(v_startX+x,v_startY+_this.smallSpace*i);
if(_this.smallSpace*i >= height){
v_startX = v_startX+x;
v_startY = v_startY+_this.smallSpace*i;
clearInterval(intVal);
draw_4();
}
},_this.speed);
}
var draw_4 = function(){
var i = 0;
var intVal = setInterval(function(){
i++;
// 每次偏移量
var x = (width/2+hypotenuseWidth)/_this.smallSpace*i;
_this.rander(v_startX+x,v_startY-_this.smallSpace*i);
if(_this.smallSpace*i >= height){
v_startX = v_startX+x;
v_startY = v_startY-_this.smallSpace*i;
clearInterval(intVal);
draw_5();
}
},_this.speed);
}
var draw_5 = function(){
var i = 0;
var intVal = setInterval(function(){
i++;
// 每次偏移量
var y = hypotenuseHeight/_this.smallSpace*i;
_this.rander(v_startX-_this.smallSpace*i,v_startY-y);
if(_this.smallSpace*i >= hypotenuseWidth){
v_startX = v_startX-_this.smallSpace*i;
v_startY = v_startY-y;
clearInterval(intVal);
draw_6();
}
},_this.speed);
}
var draw_6 = function(){
var i = 0;
var intVal = setInterval(function(){
i++;
// 每次偏移量
var y = concave/(width/2/_this.smallSpace)*i;
_this.rander(v_startX-_this.smallSpace*i,v_startY+y);
if(_this.smallSpace*i >= width/2){
clearInterval(intVal);
callback();
}
},_this.speed);
}
draw_1();
},
// 画U
draw_u: function(callback){
var _this = this;
var width=60,height=120;
// 画U_|
var draw_1 = function(){
var i = 0;
var intVal = setInterval(function(){
i++;
_this.rander(_this.startX,_this.startY+_this.smallSpace*i);
if(_this.smallSpace*(i+2) >= height){
clearInterval(intVal);
draw_2();
}
},_this.speed);
}
// 画U_-
var draw_2 = function(){
var function1 = function(){
var i = 0;
// 处理的高度
var cHeight = _this.smallSpace*2;
var intVal = setInterval(function(){
i++;
/*
* 每次偏移量
* _this.smallSpace*2留的高度
*/
var y = cHeight/(width/_this.smallSpace)*i;
var y_point = _this.startY+(height-cHeight)+y;
_this.rander(_this.startX+_this.smallSpace*i,y_point);
if(_this.smallSpace*i >= width/2){
clearInterval(intVal);
function2();
}
},_this.speed);
}
var function2 = function(){
var i = 0;
var intVal = setInterval(function(){
i++;
// 处理的高度
var cHeight = _this.smallSpace*2;
/*
* 每次偏移量
* _this.smallSpace*2留的高度
*/
var y = cHeight/(width/_this.smallSpace)*i;
var y_point = _this.startY+(height-_this.smallSpace)-y;
_this.rander(_this.startX+width/2+_this.smallSpace*i,y_point);
if(_this.smallSpace*i >= width/2){
clearInterval(intVal);
draw_3();
}
},_this.speed);
}
function1();
}
// 画U_|
var draw_3 = function(){
var i = 0;
// 处理的高度
var cHeight = _this.smallSpace*2;
var intVal = setInterval(function(){
i++;
var y_point = _this.startY+(height-cHeight)-_this.smallSpace*i;
_this.rander(_this.startX+width,y_point);
if(_this.smallSpace*(i+3) >= height){
clearInterval(intVal);
callback();
}
},_this.speed);
}
draw_1();
}
};
Font.init();
setInterval(function(){
Canvas.anim.rander();
},20);
//Font.draw_v();
Font.draw_i(function(){
Font.startX += 150;
Font.draw_v(function(){
Font.startX += 120;
Font.draw_u(function(){});
});
});
</script>
canvas背景的更多相关文章
- canvas背景透明
var can=document.getElementById("canv"); c=can.getContext("2d"); c.globalAlpha=. ...
- canvas 背景填充
这儿介绍canvas的ccreatePattern函数, context.createPattern(Image,"repeat"),还可以repeat-x,reapter-y 还 ...
- Cocos Creator （webgl模式下怎么让canvas背景透明）
项目中构建出web-mobile包后,打开main.js 在main.js中加入如下两行即可让canvas变透明 cc.director.setClearColor(new cc.Color(0,0, ...
- canvas背景动画
偶然反驳可看到博客背景的炫酷效果 觉得很新奇就去查看了一下源码 结果在git上找到了 记录一下 https://github.com/hustcc/canvas-nest.js/
- JS - 使 canvas 背景透明
canvas = document.getElementById('canvas1'); var context = canvas.getContext('2d');context.fillStyle ...
- canvas背景粒子动态变化动画
var canvas = document.getElementById("cas"); var ctx = canvas.getContext("2d"); ...
- canvas 背景透明
theCanvas = document.getElementById('canvasOne');var context = theCanvas.getContext('2d');context.fi ...
- 使用Canvas绘制背景图
原文 http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...
- 如何把canvas元素作为网站背景总结详解
如何把canvas元素作为网站背景总结详解 一.总结 一句话总结:最简单的做法是绝对定位并且z-index属性设置为负数. 1.如何把canvas元素作为网站背景的两种方法? a.设置层级(本例代码就 ...
随机推荐
- 来谈谈你对CSS盒模型的认识？
任何一个网页的搭建都离不开盒模型的堆砌.应该说css模型是web的一个根基,最后呈现出来的效果不同无非就是在高宽.内容与背景删的区别而已. 那么CSS模型有什么认识的呢? 首先,css盒模型有几种呢? ...
- 原生js模拟jquery写法
function $_custom(fun) { document.onreadystatechange = function() { if (document.readyState == " ...
- javascript闭包中循环问题
如下的html,为什么每次输出都是5,而不是点击每个p,就alert出对应的1,2,3,4,5. <html > <head> <meta http-equiv=&quo ...
- linux下nginx的安装及配置
一.安装nginx前,我们首先要确保系统安装了g++.gcc.openssl-devel.pcre-devel和zlib-devel软件,可通过如图所示命令进行检测,如果以安装我们可以通过图二所示卸载 ...
- Spring 框架（三）
1 spring l AOP :切面编程 切面:切入点 和 通知 结合 l spring aop 编程 <aop:config> 方法1: <aop:pointcut express ...
- ogr2ogr使用
简介 org2ogr是OGR模块中提供的一个重要工具,用于对数据源进行格式转换 使用方式 命令行参数 [xingxing.dxx@30_28_6_20 J50F001020]$ ogr2ogr --l ...
- redis 存取问题
今天在写短信接口时候,要把验证码存到缓存里面.因为之前别人已经写的有案例,按照之前写的,获取 值.存到数据库,存到redis. 因为有过期时间,需要传过期时间.但是怎么都是不出来... 源码: @Ov ...
- Springmvc ajax跨域请求处理
上次给一个网站写网站 前后端分离 最后跪在ajax跨域上面了 自己在网上找了个方法 亲试可用 记录一下 写一个类 继承HandlerInterceptorAdapter package co ...
- SQL Server ->> Database Promgramming Object Security Control（数据库编程对象安全控制）
对于SQL Server内编程对象的安全控制是今天我在思考的问题.在MSDN上找到了几篇有用的文章. 首先微软推荐了三种做法: 1)第一种做法是在SQL Server中对一个应用程序对应创建应用程序角 ...
- pt-kill
pt-kill作用主要是用来杀掉MySQL的链接,在查杀进程的时候,它从show processlist 中获取满足条件的连接然后进行kill,也可以从从包含show processlist的文件中读 ...