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

程序员文章站 2023-12-04 14:51:05

这篇文章主要介绍了HTML5 用动画的表现形式装载图像的相关资料,需要的朋友可以参考下... 16-03-08...

示例使用html5的canvas标签和javascript脚本，简单的编写了装载图片效果，请使用支持html5的浏览器预览效果：
下图为以逐渐横向栅格的效果图

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

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

在HTML5 canvas里用卷积核进行图像处理的方法