<!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,width,height); drawWidth=0; functionId=self.setInterval("drawImg1()",100); btndisable(); } function drawImg1() { context.drawImage(image,drawWidth,image.height,image.height); drawWidth=drawWidth+2; if(drawWidth>width) { window.clearInterval(functionId); btnEnable(); } } function btn2_onclick() { context.fillStyle = "#EEEEFF"; context.fillRect(0,height); drawHeight=0; functionId=self.setInterval("drawImg2()",100); btndisable(); } function drawImg2() { context.save(); context.drawImage(image,image.width,drawHeight,drawHeight); drawHeight=drawHeight+2; if(drawHeight>height) { window.clearInterval(functionId); btnEnable(); } context.restore(); } function btn3_onclick() { context.fillStyle = "#EEEEFF"; context.fillRect(0,height); drawLeft=width/2; drawWidth=0; functionId=self.setInterval("drawImg3()",100); btndisable(); } function drawImg3() { context.save(); context.drawImage(image,drawLeft,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,height); drawTop=height/2; drawHeight=0; functionId=self.setInterval("drawImg4()",100); btndisable(); } function drawImg4() { context.save(); context.drawImage(image,drawTop,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,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,image.height); } drawWidth+=1; if(drawWidth>spaceWidth) { window.clearInterval(functionId); btnEnable(); } } function btn6_onclick() { context.fillStyle = "#EEEEFF"; context.fillRect(0,height); spaceHeight=height/10; drawHeight=0; functionId=self.setInterval("drawImg6()",100); btndisable(); } function drawImg6() { context.save(); context.clearRect(0,height); for(i=0;i<10;i++) { context.drawImage(image,0+i*spaceHeight,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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
