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.设置层级(本例代码就 ...
随机推荐
- 我的Java编码规范
1.类名采用驼峰命名法,首字母大写. 2.类变量采用驼峰命名法,首字母小写. 3.方法名是一个动词短语,首字母小写,尽量能描述清楚这个方法的意图. 4.注释在精不在多,一个好的注释要尽量描述出这段代码 ...
- java设计模式之抽象工厂模式学习
工厂模式有个问题就是,类的创建依赖工厂.要想增加一个工厂类,就要修改原来的代码,这违背了闭包原则.所以,从设计角度考虑,有一定的问题,如何解决?就用到抽象工厂模式,创建多个工厂类,这样一旦需要增加新的 ...
- mui.ajax()和asp.net sql服务器数据交互【2】json数组和封装
今天没有做循环创建显示:可以参考张鑫旭的文章:<基于HTML模板和JSON数据的JavaScript交互> 1.ashx页面代码 //下面的封装一般框架底层都是写好的:连接 数据库和获取D ...
- jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...
- Java的异常处理throw和throws的区别
区别一: throw 是语句抛出一个异常:throws 是方法抛出一个异常: throw语法:throw <异常对象> ...
- js中的this--执行上下文
条件:函数调用的时候 才有执行上下文 this 不同情况的调用,this也不同 1)当函数直接打点调用,此时的this 是window 2)事件触发函数,此时的this是触发这个事件的对象 3)当对 ...
- php接收post过来的json数据
<html> <head> <title>json</title> <script src="//cdn.bootcss.com/jqu ...
- <Android Framework 之路>BootAnimation（1）
介绍 开机动画,BootAnimation,就是Android手机开机郭晨各种以一个展示给用户的界面,实际是一个多个帧组成的动画,在界面上进行一帧一帧的播放,形成开机动画的效果. 本文针对Androi ...
- ArcEngine交互画线
代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-- ...
- [小北De编程手记] : Lesson 03 - Selenium For C# 之 元素定位
无论哪一种自动化测试的驱动框架(基于B/S,桌面应用,还是手机App).都应当具有一套优秀的元素定位技术.通常的自动化测试流程也可以简单的归结为是一个从被测试程序中识别或是定位元素以及执行操作和验证元 ...