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

示例使用html5的canvas标签和javascript脚本，简单的编写了装载图片效果，请使用支持html5的浏览器预览效果：

下图为以逐渐横向栅格的效果图

html部分：
xml/html code
复制内容到剪贴板

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);
}

以上内容是www.887551.com给大家介绍的html5 用动画的表现形式装载图像，希望对大家有所帮助！

黄山市民网：https://www.huangshanshimin.com/