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


Posted in HTML / CSS onMarch 08, 2016

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

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

html部分:
XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>    
  2. <html lang="en">    
  3. <head>    
  4. <meta charset="UTF-8">    
  5. <title>html5 装载图片</title>    
  6. </head>    
  7. <body>    
  8. <button onclick="drawImg1()">从左到右</button>    
  9. <button onclick="drawImg2()">从中央到左右两边</button>    
  10. <button onclick="drawImg3()">以逐渐横向栅格</button>    
  11. <hr/>    
  12. <canvas class="canvas" id="canvas" width="600" height="300"></canvas>    
  13. </body>    
  14. </html>   

JavaScript部分:
 
XML/HTML Code复制内容到剪贴板
  1.  //初始化    
  2. var canvas = document.getElementById("canvas"),    
  3. context = canvas.getContext("2d"),    
  4. image = new Image();    
  5. image.src = "img/test.jpg";    
  6. //从左到右加载方法    
  7. function drawImg1(){    
  8. var drawWidth = 0,    
  9. interval = setInterval(function(){    
  10. context.drawImage(image, 0, 0, drawWidth, image.height, 0, 0, drawWidth, image.height);    
  11. drawWidth += 20;    
  12. if(drawWidth > canvas.width) clearInterval(interval);    
  13. },100);    
  14. }    
  15. //从中央向左右两边拉开加载方法    
  16. function drawImg2(){    
  17. var drawWidth = 0,    
  18. drawLeft = canvas.width/2,    
  19. interval = setInterval(function(){    
  20. context.drawImage(image, drawLeft, 0, drawWidth, image.height, drawLeft, 0, drawWidth, image.height);    
  21. drawWidth += 20;    
  22. drawLeft -10;    
  23. if(drawLeft < 0) clearInterval(interval);    
  24. },100);    
  25. }    
  26. //以逐渐横向栅格加载方法    
  27. function drawImg3(){    
  28. var drawWidth = 0,    
  29. spaceWidth = canvas.width/20, //10指分割的块数    
  30. interval = setInterval(function(){    
  31. for(var i = 0;i<20;i++){    
  32. context.drawImage(image, i*spaceWidth, 0, drawWidth, image.height, i*spaceWidth, 0, drawWidth, image.height);    
  33. }    
  34. drawWidth += 5;    
  35. if(drawWidth > spaceWidth) clearInterval(interval);    
  36. },100);    
  37. }  

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

HTML / CSS 相关文章推荐
css3中的calc函数浅析
Jul 10 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
html5唤起app的方法
Nov 30 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 #HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 #HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 #HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 #HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 #HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 #HTML / CSS
HTML5如何实现元素拖拽
Mar 11 #HTML / CSS
You might like
微信公众平台开发之配置与请求
2015/08/26 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
python生成验证码图片代码分享
2016/01/28 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
单方离婚协议书范本(2014版)
2014/09/30 职场文书
2014年食堂工作总结
2014/11/20 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
公司安全管理制度范本
2015/08/05 职场文书
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers