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

发布时间：2016-03-08 16:45:53 作者：佚名

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

示例使用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 用动画的表现形式装载图像，希望对大家有所帮助！

Tag：装载 HTML5 图像动画

相关文章

HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
HTML5新增了一个元素canvas，用于绘图使用，其实它的表现和div比较接近（其实他应该属于inline-block），而提供了许多接口，从而轻易的绘制矩形框、园三角形等
2013-04-24
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
HTML5, 原来如此神奇。程序在google浏览器中测试通过，感兴趣的朋友可以参考本文讲解的HTML5组件Canvas实现图像灰度化的具体步骤，希望对你有所帮助
2013-04-22
Html5实现如何在两个div元素之间拖放图像
调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)通过 dataTransfer.getData(Text) 方法获得被拖的数据，感兴趣的朋友可以参考
2013-03-29
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度，而无须求助图像或其它插件,尽管SVG的文本渲染如此强大，但是还是有一个不足之处：SVG不能执行自动换行
2013-01-30

最新评论