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.设置层级(本例代码就 ...
随机推荐
- UX2内核浏览加速技术纲要[带你解决WebView卡顿]
UX2内核是本人负责主要开发的浏览服务项目,其主要目的是为开发者提供一个简单好用.轻便的网络浏览服务.UX2内核的安卓端是基于WebView进行深度优化的,同时欢迎大家使用这个内核用于app页面或浏览 ...
- CentOS 7运维管理笔记(11)----PHP安装与配置
PHP的安装同样需要经过环境检查.编译和安装3个步骤. 1.首先用百度搜索 “PHP:Downloads”, 点击第一个网页: 选择5.5.37版本,选择 .tar.gz 格式的文件: 来到镜像列表网 ...
- Android Button事件处理
一般只需要处理按钮的点击事件就可以,但想让一个按钮处理多个事件,就得同时监听多个方法. OnClickListener 点击事件 OnLongClickListener 长按事件 OnTouchLi ...
- Android通过浏览器打开app页面并且传递值
最近公司有个需求,要求从第三方网页端打开一个网页,然后在网页中点击“下载”,“打开”按钮,在app端进行下载和打开操作.这里记录下方法. 首先,网页和app页面进行交互,其实会很快想到JS交互,但是现 ...
- Hush Framework框架配置（续） 转自《Android和PHP最佳实践》官方站
图书资源下载 Xampp 开发环境下载:http://pan.baidu.com/share/link?shareid=531771&uk=773037279 微博实例完整源码包下载:http ...
- ES6入门——函数的扩展
1.函数参数的默认值 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法.现在ES6可以为函数的参数添加默认值,简洁了许多. ES5 function show(a,b){ b = b ...
- 二十一、如何导入svg图片
svg就相当于字体,如何将生成的svg导入到自己的项目中去呢? 1.将类似下面的文件放入自己的项目中: 2.生成的svg中有一个style.css文件,将里面的内容拷贝到你的css中,然后更改上图的路 ...
- qt 样式表基本用法
Qt样式表 QT样式表参考CSS层叠样式表设计,不同之处在于QT样式表应用于Widget世界. 可以使用QApplication::setStyleSheet()函数设置到整个应用程序上,也可以使用Q ...
- 两步让你的mobile traffic通过fiddler代理传送
mobile app运行时由于调试网络相关的内容非常不便,所以如果能够让iphone通过桌面主机来跑traffic,那么在pc上就能非常清楚地检查mobile app和后端之间有什么问题了. 幸运的是 ...
- Spring学习总结之---装配Bean
Spring配置的可选方案 前言:Spring容器负责创建应用程序中的bean并通过DI来协调这些对象之间的关系,作为开发人员,你需要告诉Spring容器要创建那些Bean,以哪种方式创建,并且如何将 ...