史雨霏,南邮教师冯君,蜗婚txt
示例使用html5的canvas标签和javascript脚本,简单的编写了装载图片效果,请使用支持html5的浏览器预览效果:
下图为以逐渐横向栅格的效果图
html部分:
xml/html code复制内容到剪贴板
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>html5 装载图片</title>
- </head>
- <body>
- <button onclick="drawimg1()">从左到右</button>
- <button onclick="drawimg2()">从中央到左右两边</button>
- <button onclick="drawimg3()">以逐渐横向栅格</button>
- <hr/>
- <canvas class="canvas" id="canvas" width="600" height="300"></canvas>
- </body>
- </html>
javascript部分:
xml/html code复制内容到剪贴板
- //初始化
- var canvas = document.getelementbyid("canvas"),
- context = canvas.getcontext("2d"),
- image = new image();
- image.src = "img/test.jpg";
- //从左到右加载方法
- function drawimg1(){
- var drawwidth = 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);
- }
- //从中央向左右两边拉开加载方法
- function drawimg2(){
- var drawwidth = 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);
- }
- //以逐渐横向栅格加载方法
- function drawimg3(){
- var drawwidth = 0,
- spacewidth = canvas.width/20, //10指分割的块数
- interval = setinterval(function(){
- for(var i = 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 用动画的表现形式装载图像,希望对大家有所帮助!
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!!
点击进行留言回复
网友评论