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.设置层级(本例代码就 ...
随机推荐
- Tomcat Post请求大小限制
理论上讲,POST是没有大小限制的.HTTP协议规范也没有进行大小限制,起限制作用的是服务器的处理程序的处理能力. 如:在Tomcat下取消POST大小的限制(Tomcat默认2M): 打开tomca ...
- promose
function runAsync1(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function() ...
- Angularjs之依赖注入
一个对象通常有三种方式可以获得对其依赖的控制权: 在内部创建依赖: 通过全局变量进行引用: 在需要的地方通过参数进行传递 依赖注入是通过第三种方式实现的.比如: function SomeClass( ...
- avalon2简单数据绑定(自定义属性绑定)
<!DOCTYPE html> <html> <head> <title>项目</title> <meta charset=" ...
- 表格 滚动条 (tbody部分滚动)
本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记 html <table> <thead> < ...
- arcgis10.sp5下载地址
http://support.esrichina.com.cn/2012/0716/1649.html
- C# textBox限定输入数字
private void tBox_KeyPress(object sender, KeyPressEventArgs e) { ; //禁止空格键 )) return; //处理负数 if (e.K ...
- klee错误汇报二：KLEE的optimize选项的一个困惑
问题已经提交github:https://github.com/klee/klee/issues/650 在一个对命令行参数进行建模的符号执行过程中,添加optimize选项与不添加optimize选 ...
- Python pymysql模块学习心得
PyMySQL包含了一个纯Python的MySQL客户端的库,它的目的是用来替换MySQLdb,并且工作在CPython,PyPy和IronPython. PyMySQL官方地址:https://py ...
- C#中的多线程 - 基础知识 z
原文:http://www.albahari.com/threading/ 专题:C#中的多线程 1简介及概念Permalink C# 支持通过多线程并行执行代码,线程有其独立的执行路径,能够与其它线 ...