html5 canvas用动画的形式装载图像
本示例使用HTML5 canvas，简单的编写了装载图片效果， 请使用支持HTML5的浏览器预览效果：
下图为以逐渐横向栅格的效果图
html部分：
<!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部分：
//初始化
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 canvas用动画的形式装载图像的更多相关文章
- 7个惊艳的HTML5 Canvas动画效果及源码
HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...
- 8个经典炫酷的HTML5 Canvas动画欣赏
HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- 16个非常有趣的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- HTML5 Canvas 超逼真烟花绽放动画
各位前端朋友们,大家好!五一假期即将结束,在开启加班模式之前,我要给大家分享一个超酷超逼真的HTML5 Canvas烟花模拟动画.这次升级版的烟花动画有以下几个特点: 烟花绽放时,将展现不同的色彩,不 ...
- 前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例
HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内 ...
- 程序猿必备的10款超炫酷HTML5 Canvas插件
1.超炫酷HTML5 Canvas 3D旋转地球动画 这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球.另外我 ...
- HTML5 Canvas火焰效果 像火球发射一样
Canvas是HTML5中非常重要而且有用的东西,我们可以在Canvas上绘制任意的元素,就像你制作Flash一样.今天我们就在Canvas上来制作一款火焰发射的效果.就像古代的火球炮一样,而且可以在 ...
- HTML5/jQuery雷达动画图表 图表配置十分简单
1.HTML5/jQuery雷达动画图表 图表配置十分简单 之前我们介绍过不少形形色色的HTML5图表了,像这款HTML5折线图表Aristochart是一款很不错的折线图表,这款HTML5 Canv ...
随机推荐
- 关于编译Android源码
NO.1(适用于全编) (1)source build/envsetup.sh (2)lunch (3)make -j(x) NO.2(适用于编模块) (1)source build/envsetup ...
- java hashCode方法返回值
hashCode 是和内存地址相关的一个整数. HashCode只是在需要用到哈希算法的数据结构中才有用 用途是为了方便快速地查找对象: HashMap 是根据键对象的 HashCode 来进行快速查 ...
- spring启动component-scan类扫描加载过程---源码分析
http://blog.csdn.net/xieyuooo/article/details/9089441#comments
- js手机号码和电话号码验证正则表达式
/******************** 函数名称:IsTelephone 函数功能:固话,手机号码检查函数,合法返回true,反之,返回false 函数参数:obj,待检查的号码 检查规则: (1 ...
- win8 系统无法正常安装.net framework 2.0和3.0框架如何解决
在安装.net framework2.0框架的时候一直提示要用户从网上面下载框架,你点击下载好的安装包也是无法安装的.这个时候就需要你使用离线的安装包来进行问题的解答附件在此http://pan.ba ...
- 转载 --ios 模型-setValuesForKeysWithDictionary
应用场景:app请求后端数据,返回的数据是JSON形式,如: { "is_favor" = 0; "is_follow" = 0; "is_prais ...
- libcurl 函数curl_easy_perform在release下崩溃的问题
今天遇到一个很奇怪的问题: 工程中用到了libcurl, debug可以正常运行,release每次都崩溃,断到curl_easy_perform这一行.堆栈中也得不到有用信息,于是GOOGLE一番, ...
- JSON 的应用
使用 JSON 需要的 jar 包:
- Python模块：collections
collections模块常用的数据类型: (1)namedtuple(): #创建一个自定义的tuple对象,并且规定了tuple元素的个数,并可以用属性而不是索引来引用tuple的某个元素. fr ...
- 用.net访问电子枢纽信用中心的数据查询服务
概要说明 电子枢纽全称国家交通运输物流公共信息平台,主要提供物流及生产企业进行物流相关数据交换的标准和API,详细介绍可参考其官网www.logink.org,本文假定阅读者对该平台已有了解,并已成功 ...