canvas背景
2018-06-24 02:26:05来源：未知 阅读 ()
<!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>
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：自定义简洁博客园布局样式
下一篇：css左固定右自适应常用方法
相关文章
- css：背景（背景颜色、图片、平铺、背景固定、背景颜色半透 2020-06-01
- 美化博客园样式 2020-05-17
- CSS背景图片的6个有趣的技巧 2020-05-12
- Vue 结合html2canvas和jsPDF实现html页面转pdf 2020-04-25
- 表单元素 2020-04-05
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签