HTML5动画形式装载图像
2015-07-21 21:20
507 查看
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>HTML5多种动画形式加载图像</title>
<script type="text/javascript">
var width,height;
var context,image,functionId;
var drawLeft,drawWidth;
var drawTop,drawHeight;
var spaceWidth,spaceHeight;
function window_onload()
{
var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
image = new Image();
image.src = "/jscss/demoimg/wall_s7.jpg";
width=canvas.width;
height=canvas.height;
}
function btn1_onclick()
{
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0,width,height);
drawWidth=0;
functionId=self.setInterval("drawImg1()",100);
btnDisable();
}
function drawImg1()
{
context.drawImage(image,0,0,drawWidth,image.height,0,0,drawWidth,image.height);
drawWidth=drawWidth+2;
if(drawWidth>width)
{
window.clearInterval(functionId);
btnEnable();
}
}
function btn2_onclick()
{
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0,width,height);
drawHeight=0;
functionId=self.setInterval("drawImg2()",100);
btnDisable();
}
function drawImg2()
{
context.save();
context.drawImage(image,0,0,image.width,drawHeight,0,0,image.width,drawHeight);
drawHeight=drawHeight+2;
if(drawHeight>height)
{
window.clearInterval(functionId);
btnEnable();
}
context.restore();
}
function btn3_onclick()
{
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0,width,height);
drawLeft=width/2;
drawWidth=0;
functionId=self.setInterval("drawImg3()",100);
btnDisable();
}
function drawImg3()
{
context.save();
context.drawImage(image,drawLeft,0,drawWidth,image.height,drawLeft,0,drawWidth,image.height);
drawLeft=drawLeft-1;
drawWidth=drawWidth+2;
if(drawLeft<=0)
{
window.clearInterval(functionId);
btnEnable();
}
context.restore();
}
function btn4_onclick()
{
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0,width,height);
drawTop=height/2;
drawHeight=0;
functionId=self.setInterval("drawImg4()",100);
btnDisable();
}
function drawImg4()
{
context.save();
context.drawImage(image,0,drawTop,image.width,drawHeight,0,drawTop,image.width,drawHeight);
drawTop=drawTop-1;
drawHeight=drawHeight+2;
if(drawTop<=0)
{
window.clearInterval(functionId);
btnEnable();
}
context.restore();
}
function btn5_onclick()
{
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0,width,height);
spaceWidth=width/10;
drawWidth=0;
functionId=self.setInterval("drawImg5()",100);
btnDisable();
}
function drawImg5()
{
for(i=0;i<10;i++)
{
context.drawImage(image,0+i*spaceWidth,0,drawWidth,image.height,0+i*spaceWidth,0,drawWidth,image.height);
}
drawWidth+=1;
if(drawWidth>spaceWidth)
{
window.clearInterval(functionId);
btnEnable();
}
}
function btn6_onclick()
{
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0,width,height);
spaceHeight=height/10;
drawHeight=0;
functionId=self.setInterval("drawImg6()",100);
btnDisable();
}
function drawImg6()
{
context.save();
context.clearRect(0, 0,width,height);
for(i=0;i<10;i++)
{
context.drawImage(image,0,0+i*spaceHeight,image.width,drawHeight,0,0+i*spaceHeight,image.width,drawHeight);
}
drawHeight+=1;
if(drawHeight>spaceHeight)
{
window.clearInterval(functionId);
btnEnable();
}
context.restore();
}
function btnDisable()
{
document.getElementById("btn1").disabled="disabled";
document.getElementById("btn2").disabled="disabled";
document.getElementById("btn3").disabled="disabled";
document.getElementById("btn4").disabled="disabled";
document.getElementById("btn5").disabled="disabled";
document.getElementById("btn6").disabled="disabled";
}
function btnEnable()
{
document.getElementById("btn1").disabled="";
document.getElementById("btn2").disabled="";
document.getElementById("btn3").disabled="";
document.getElementById("btn4").disabled="";
document.getElementById("btn5").disabled="";
document.getElementById("btn6").disabled="";
}
</script>
<style>
article{
align:center;
}
canvas{
background-color:white;
}
div#divLeft{
width:150px;
float:left;
}
div#divRight{
float:left;
}
input[type='button']{
width:140px;
}
</style>
</head>
<body onload="window_onload()">
<article>
<h1>HTML5动画形式装载图像</h1>
<div id="divLeft">
<input type="button" id="btn1" value="从左往右装载" onclick="btn1_onclick()"></button>
<input type="button" id="btn2" value="从上往下装载" onclick="btn2_onclick()"></button>
<input type="button" id="btn3" value="横向窗帘式拉开" onclick="btn3_onclick()"></button>
<input type="button" id="btn4" value="竖向窗帘式拉开" onclick="btn4_onclick()"></button>
<input type="button" id="btn5" value="横向百叶窗式展开" onclick="btn5_onclick()"></button>
<input type="button" id="btn6" value="纵向百叶窗式展开" onclick="btn6_onclick()"></button>
</div>
<div id="divRight">
<canvas id="canvas" width="120" height="100"></canvas>
</div>
</article>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>HTML5多种动画形式加载图像</title>
<script type="text/javascript">
var width,height;
var context,image,functionId;
var drawLeft,drawWidth;
var drawTop,drawHeight;
var spaceWidth,spaceHeight;
function window_onload()
{
var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
image = new Image();
image.src = "/jscss/demoimg/wall_s7.jpg";
width=canvas.width;
height=canvas.height;
}
function btn1_onclick()
{
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0,width,height);
drawWidth=0;
functionId=self.setInterval("drawImg1()",100);
btnDisable();
}
function drawImg1()
{
context.drawImage(image,0,0,drawWidth,image.height,0,0,drawWidth,image.height);
drawWidth=drawWidth+2;
if(drawWidth>width)
{
window.clearInterval(functionId);
btnEnable();
}
}
function btn2_onclick()
{
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0,width,height);
drawHeight=0;
functionId=self.setInterval("drawImg2()",100);
btnDisable();
}
function drawImg2()
{
context.save();
context.drawImage(image,0,0,image.width,drawHeight,0,0,image.width,drawHeight);
drawHeight=drawHeight+2;
if(drawHeight>height)
{
window.clearInterval(functionId);
btnEnable();
}
context.restore();
}
function btn3_onclick()
{
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0,width,height);
drawLeft=width/2;
drawWidth=0;
functionId=self.setInterval("drawImg3()",100);
btnDisable();
}
function drawImg3()
{
context.save();
context.drawImage(image,drawLeft,0,drawWidth,image.height,drawLeft,0,drawWidth,image.height);
drawLeft=drawLeft-1;
drawWidth=drawWidth+2;
if(drawLeft<=0)
{
window.clearInterval(functionId);
btnEnable();
}
context.restore();
}
function btn4_onclick()
{
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0,width,height);
drawTop=height/2;
drawHeight=0;
functionId=self.setInterval("drawImg4()",100);
btnDisable();
}
function drawImg4()
{
context.save();
context.drawImage(image,0,drawTop,image.width,drawHeight,0,drawTop,image.width,drawHeight);
drawTop=drawTop-1;
drawHeight=drawHeight+2;
if(drawTop<=0)
{
window.clearInterval(functionId);
btnEnable();
}
context.restore();
}
function btn5_onclick()
{
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0,width,height);
spaceWidth=width/10;
drawWidth=0;
functionId=self.setInterval("drawImg5()",100);
btnDisable();
}
function drawImg5()
{
for(i=0;i<10;i++)
{
context.drawImage(image,0+i*spaceWidth,0,drawWidth,image.height,0+i*spaceWidth,0,drawWidth,image.height);
}
drawWidth+=1;
if(drawWidth>spaceWidth)
{
window.clearInterval(functionId);
btnEnable();
}
}
function btn6_onclick()
{
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0,width,height);
spaceHeight=height/10;
drawHeight=0;
functionId=self.setInterval("drawImg6()",100);
btnDisable();
}
function drawImg6()
{
context.save();
context.clearRect(0, 0,width,height);
for(i=0;i<10;i++)
{
context.drawImage(image,0,0+i*spaceHeight,image.width,drawHeight,0,0+i*spaceHeight,image.width,drawHeight);
}
drawHeight+=1;
if(drawHeight>spaceHeight)
{
window.clearInterval(functionId);
btnEnable();
}
context.restore();
}
function btnDisable()
{
document.getElementById("btn1").disabled="disabled";
document.getElementById("btn2").disabled="disabled";
document.getElementById("btn3").disabled="disabled";
document.getElementById("btn4").disabled="disabled";
document.getElementById("btn5").disabled="disabled";
document.getElementById("btn6").disabled="disabled";
}
function btnEnable()
{
document.getElementById("btn1").disabled="";
document.getElementById("btn2").disabled="";
document.getElementById("btn3").disabled="";
document.getElementById("btn4").disabled="";
document.getElementById("btn5").disabled="";
document.getElementById("btn6").disabled="";
}
</script>
<style>
article{
align:center;
}
canvas{
background-color:white;
}
div#divLeft{
width:150px;
float:left;
}
div#divRight{
float:left;
}
input[type='button']{
width:140px;
}
</style>
</head>
<body onload="window_onload()">
<article>
<h1>HTML5动画形式装载图像</h1>
<div id="divLeft">
<input type="button" id="btn1" value="从左往右装载" onclick="btn1_onclick()"></button>
<input type="button" id="btn2" value="从上往下装载" onclick="btn2_onclick()"></button>
<input type="button" id="btn3" value="横向窗帘式拉开" onclick="btn3_onclick()"></button>
<input type="button" id="btn4" value="竖向窗帘式拉开" onclick="btn4_onclick()"></button>
<input type="button" id="btn5" value="横向百叶窗式展开" onclick="btn5_onclick()"></button>
<input type="button" id="btn6" value="纵向百叶窗式展开" onclick="btn6_onclick()"></button>
</div>
<div id="divRight">
<canvas id="canvas" width="120" height="100"></canvas>
</div>
</article>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5 链接记录
- HTML5 网页存储 Web Storage
- 移除HTML5 input在type="number"时的上下小箭头
- html5 音频代码
- 无线页面的“坑”
- 39个让你受益的HTML5教程
- 使用HTML5 Canvas做些什么
- 【h5白鹭引擎】如何快速开发一个小游戏
- 基于HTML5技术跨平台混合式应用开发解决方案UniSDP
- 基于HTML5的Web跨设备超声波通信方案
- HTML5游戏实战：美女弹弹弹
- HTML5获取当前的经纬度坐标
- 2015年7月20日，工作日结
- H5开发小技巧二、性能优化
- H5开发小技巧一、文档head模板构建
- 从HTML5移动应用现状谈发展趋势
- Ubuntu 下安装 Atom
- HTML5学习笔记简明版（2）：新元素之section,article,aside
- Atom下 Emmet 插件使用的简单指南
- HTML5学习笔记简明版（4）：新元素之video,audio,meter,datalist,keygen,output