本示例使用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用动画的形式装载图像的更多相关文章

  1. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  2. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  3. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  4. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  5. HTML5 Canvas 超逼真烟花绽放动画

    各位前端朋友们,大家好!五一假期即将结束,在开启加班模式之前,我要给大家分享一个超酷超逼真的HTML5 Canvas烟花模拟动画.这次升级版的烟花动画有以下几个特点: 烟花绽放时,将展现不同的色彩,不 ...

  6. 前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例

    HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内 ...

  7. 程序猿必备的10款超炫酷HTML5 Canvas插件

    1.超炫酷HTML5 Canvas 3D旋转地球动画 这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球.另外我 ...

  8. HTML5 Canvas火焰效果 像火球发射一样

    Canvas是HTML5中非常重要而且有用的东西,我们可以在Canvas上绘制任意的元素,就像你制作Flash一样.今天我们就在Canvas上来制作一款火焰发射的效果.就像古代的火球炮一样,而且可以在 ...

  9. HTML5/jQuery雷达动画图表 图表配置十分简单

    1.HTML5/jQuery雷达动画图表 图表配置十分简单 之前我们介绍过不少形形色色的HTML5图表了,像这款HTML5折线图表Aristochart是一款很不错的折线图表,这款HTML5 Canv ...

随机推荐

  1. Python爬虫抓取糗百的图片，并存储在本地文件夹

    思路: 1.观察网页,找到img标签 2.通过requests和BS库来提取网页中的img标签 3.抓取img标签后,再把里面的src给提取出来,接下来就可以下载图片了 4.通过urllib的urll ...

  2. Node.js 中MongoDB的基本接口操作

    Node.js 中MongoDB的基本接口操作 连接数据库 安装mongodb模块 导入mongodb模块 调用connect方法 文档的增删改查操作 插入文档 方法: db.collection(& ...

  3. Google V8编程详解（三）Handle & HandleScope

    上一章简单的演示了一个Helloworld Demo.里面涉及到了V8的一些基本类型和概念,本章将围绕这个Demo对V8的基本类型和相关概念进行讲解. 这里还是先把Demo贴出来便于后面分析: #in ...

  4. sql server之临时表

    一.临时表介绍 临时表在运行被创建的,虽说它的名字叫做临时表,可是对它的操作和我们平时操控表的操作基本一样, 比如最简单增.删.改.查等等.但是,需要注意的是临时表的创建是有范围限制的. 二.临时表分 ...

  5. 第十章 DOM

    10.1节点层次 html元素通过元素节点表示,特性节点通过特性节点表示,文档类型节点通过文档类型节点访问,这些类型都继承一个基类型. 10.1.1 Node类型 JavaScript中的所有节点类型 ...

  6. HashTable 简述

    1.解释:使用了映射函数,把值映射到对应的位置,key-> address, address是表中的存储位置,不是实际的地址:   2.Hash 函数设计, 分布合理,冲突少,利用率平衡,利用率 ...

  7. 什么是SCADA Viewer

    SCADA Viewer 什么是SCADA Viewer SCADA Viewer是一个基于Web的软件框架(基于Web的HMI/SCADA/M2M工业和楼宇自动化,支持Modbus,BACnet,O ...

  8. Git命令学习摘要

    1.git init  --初始化git项目 2.git status --查看项目的状态 3.git add filename --添加文件到项目 4.git diff filename --查看工 ...

  9. 自定义TextField清除按钮

    当需要设置TextField的清除按钮的时候,系统的总是不满足需求,这就需要我们自定义了,代码如下: // // TextFieldDemoViewController.m // OCDemo // ...

  10. JS实现动态提示文本框可输入剩余字数(类似发表微博数字提示)

    一.实现效果: 为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数. html & JS: <div> <textare ...