HTML5 用动画的表现形式装载图像

时间：2021-05-08

示例使用HTML5的canvas标签和Javascript脚本，简单的编写了装载图片效果，请使用支持HTML5的浏览器预览效果：
下图为以逐渐横向栅格的效果图
html部分：XML/HTML Code复制内容到剪贴板

  • <!DOCTYPEhtml>
  • <htmllang="en">
  • <head>
  • <metacharset="UTF-8">
  • <title>html5装载图片</title>
  • </head>
  • <body>
  • <buttononclick="drawImg1()">从左到右</button>
  • <buttononclick="drawImg2()">从中央到左右两边</button>
  • <buttononclick="drawImg3()">以逐渐横向栅格</button>
  • <hr/>
  • <canvasclass="canvas"id="canvas"width="600"height="300"></canvas>
  • </body>
  • </html>

    • JavaScript部分：
    　XML/HTML Code复制内容到剪贴板
  • 　//初始化
  • varcanvas=document.getElementById("canvas"),
  • context=canvas.getContext("2d"),
  • image=newImage();
  • image.src="img/test.jpg";
  • //从左到右加载方法
  • functiondrawImg1(){
  • vardrawWidth=0,
  • interval=setInterval(function(){
  • context.drawImage(image,0,0,drawWidth,image.height,0,0,drawWidth,image.height);
  • drawWidth+=20;
  • if(drawWidth>canvas.width)clearInterval(interval);
  • },100);
  • }
  • //从中央向左右两边拉开加载方法
  • functiondrawImg2(){
  • vardrawWidth=0,
  • drawLeft=canvas.width/2,
  • interval=setInterval(function(){
  • context.drawImage(image,drawLeft,0,drawWidth,image.height,drawLeft,0,drawWidth,image.height);
  • drawWidth+=20;
  • drawLeft-=10;
  • if(drawLeft<0)clearInterval(interval);
  • },100);
  • }
  • //以逐渐横向栅格加载方法
  • functiondrawImg3(){
  • vardrawWidth=0,
  • spaceWidth=canvas.width/20,//10指分割的块数
  • interval=setInterval(function(){
  • for(vari=0;i<20;i++){
  • context.drawImage(image,i*spaceWidth,0,drawWidth,image.height,i*spaceWidth,0,drawWidth,image.height);
  • }
  • drawWidth+=5;
  • if(drawWidth>spaceWidth)clearInterval(interval);
  • },100);
  • }

    • 以上内容是小编给大家介绍的HTML5 用动画的表现形式装载图像，希望对大家有所帮助！

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章