<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

</head>

<body style="width:100%; height:100%;">

    图片： <img id="qq" width="200" height="auto" src="Images/timg (2).jpg" />

    画布： <canvas id="test" width="600" height="360">您的浏览器不支持 HTML5 canvas 标签。</canvas><br />

    画布： <canvas id="test2" width="600" height="360">您的浏览器不支持 HTML5 canvas 标签。</canvas>

    <script>

        //图片填充1

        var test = document.getElementById("test");

        var testC = test.getContext("2d");

        window.onload = function () {

            var img = document.getElementById("qq");

            var pat = testC.createPattern(img, "no-repeat");

            testC.fillStyle = pat;

            testC.fillRect(30, 30, 480 + 30, 240 + 30);

        }

        //注：由于360极速模式下图片是异步加载的，因此需要onload去兼容360浏览器极速模式

        //图片填充2

        var test2 = document.getElementById("test2");

        var testC2 = test2.getContext("2d");

        var img2 = new Image();

        img2.onload = function () {

            var pat = testC2.createPattern(img2, "no-repeat");

            testC2.fillStyle = pat;

            testC2.fillRect(30, 30, 480 + 30, 240 + 30);

        }

        img2.src = "Images/timg (2).jpg";

        //注：img预加载模式下，onload应该放在为src赋值的上面，以避免已有缓存的情况下无法触发onload事件从而导致onload中的事件不执行的情况发生

  </script>

</body>

</html>

作者：leona

原文链接：http://www.cnblogs.com/leona-d/p/6361390.html

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接

Canvas-图片填充-预加载的更多相关文章

  1. JS 实现图片的预加载（转载）

    图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作. 下面的函数实现了一个我 ...

  2. [转]Javascript实现图片的预加载详解

    下面的函数实现了一个我们想要的最基本的图片预加载效果 function preloadimages(arr){ var newimages=[] var arr=(typeof arr!=" ...

  3. Javascript实现图片的预加载的完整实现

    图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作.今天我们将来实现一个完整 ...

  4. 用promise做图片的预加载

    var url='jsonp-master/0.jpg' var url1='jsonp-master/1.jpg' var url2='jsonp-master/2.jpg' var img=doc ...

  5. Jquery实现图片的预加载与延时加载

    有很多项目经常会需要判断图片加载完成后执行相应的操作,或者需要图片延迟加载,网上虽然已经有很不错的插件,但要为这些效果还得单独加载一个插件的话总感觉有点不舒服,干脆自己写了个方法: 1 2 3 4 5 ...

  6. flex 实现图片播放 方案一 图片全部预加载放内存

    这种方案,对于web的应用有局限性,在图片量比较多,比较大的时候,就会爆浏览器异常.一般建议轻量级的采用这种方案. <?xml version="1.0" encoding= ...

  7. ajax点击加载更多数据图片（预加载）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Javascript实现图片预加载【回调函数，多张图片】

    使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多张图片预加载代码.当接二连三的案例中都涉及图片预加载时,就 ...

  9. Javascript兑现图片预加载【回调函数，多张图片】 (转载)

    Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...

随机推荐

  1. 基于DDD的现代ASP.NET开发框架--ABP系列之1、ABP总体介绍

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之1.ABP总体介绍 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...

  2. MVC ：“已添加了具有相同键的项”

    最近将一个项目从ASP.NET MVC 3升级至刚刚发布的ASP.NET MVC 5.1,升级后发现一个ajax请求出现了500错误,日志中记录的详细异常信息如下: System.ArgumentEx ...

  3. chrome 脚本学习

    # 编写可复用的代码段(snippet)教程 https://jingyan.baidu.com/article/67508eb423d2929ccb1ce45b.html # chrome 脚本开发 ...

  4. 利用putty的pscp命令上传文件

    1.有的时候,本地下载源码包的速度快过vps(主要指国内),那么可以用迅雷下载后上传到vps. 2.为了这么点事情,专门安装一个ftp软件,太麻烦,于是想到了putty贴心的pscp小程序. 3.首先 ...

  5. Atitit php序列化 php的serialize序列化和json序列化

    Atitit php序列化 php的serialize序列化和json序列化 PHP 对不同类型的数据用不同的字母进行标示,Yahoo 开发网站提供的Using Serialized PHP with ...

  6. Atitit.软件开发的几大规则，法则，与原则p821.doc

    Atitit.软件开发的几大规则,法则,与原则p821.doc 1. 设计模式六大原则2 1.1. 设计模式六大原则(1):单一职责原则2 1.2. 设计模式六大原则(2):里氏替换原则2 1.3.  ...

  7. Outlets 和Referencing Outlets的区别

    转自:http://blog.sina.com.cn/s/blog_4431c7610100sypy.html 我的理解就是连接与被连接的关系吧 Outlets里面显示的是你的属性, 以及连接着的目标 ...

  8. JS高程3：函数表达式

    定义函数的方式有2种: 函数声明 函数表达式 函数声明是最常用的,函数声明的一个特征就是:在执行代码之前,就已经读取了函数声明. 这个特征还有一个专门的术语:函数声明提升. 递归函数 所谓递归函数,就 ...

  9. LeetCode 145 Binary Tree Postorder Traversal（二叉树的兴许遍历）+（二叉树、迭代）

    翻译 给定一个二叉树.返回其兴许遍历的节点的值. 比如: 给定二叉树为 {1. #, 2, 3} 1 \ 2 / 3 返回 [3, 2, 1] 备注:用递归是微不足道的,你能够用迭代来完毕它吗? 原文 ...

  10. Oracle基础（三）数据库管理

    上篇介绍了Oracle数据库的基本操作指令:增.删.改.查以下针对数据库的管理进行介绍 数据库角色介绍 数据管理员:  至少有一个数据库管理员dba. 职责:安装和升级oracel数据库 建库,表空间 ...