先看代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         canvas {

             background: coral;

         }

     </style>

 </head>

 <body>

 <img id="img" src="1.jpg">

 <canvas id="canvas" width="400" height="400"></canvas>

 <script src="main.js"></script>

 </body>

 </html>
 (function () {

     var con = document.getElementById("canvas").getContext("2d");

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

     function render() {

         con.drawImage(img, 20, 20, 100, 100, 0, 0, 100, 100);

     }

     render();

 })();

代码的效用是实现剪切一块图片放到指定位置。

但是上面的代码有一个问题，就是浏览器并不是每次刷新，图片都能正常剪切，只是偶尔成功，这就是因为异步。

解决此问题

 (function () {

     var con = document.getElementById("canvas").getContext("2d");

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

     function render() {

         con.drawImage(img, 20, 20, 100, 100, 0, 0, 100, 100);

         requestAnimationFrame(render);

     }

     render();

 })();

这就行了，（吐槽：每次都刷新，还不信你不出来，异步我也得把你整出来。。

）

canvas drawImage异步特性的更多相关文章

  1. Servlet 3.0异步特性初探

    Servlet 是 Java 为了编写服务端程序而定义的一个接口规范,在 Servlet 3.0 以后支持了异步的操作. 最近项目添加了一个代码热部署的功能,在客户端输入信号,信号到达 Web 服务器 ...

  2. ES7中前端异步特性：async、await。

    在最新的ES7(ES2017)中提出的前端异步特性:async.await. 什么是async.await? async顾名思义是"异步"的意思,async用于声明一个函数是异步的 ...

  3. <canvas>drawImage()方法无法显示图片

    在书上看到用<canvas>绘制图像就动手试试,刚开始,我的代码是这样的: <!DOCTYPE html> <html> <head> <meta ...

  4. Canvas DrawImage截取和压缩图片的陷阱

    html5的canvas十分之强大,可以做到快速的截取压缩出新的图片! 不过最近开发过程中遇到一个问题,图片压缩后使用toDataURL取得图片显示为一片漆黑,什么都没有! 折腾了很久,起初以为是上传 ...

  5. canvas - drawImage()方法绘制图片不显示的问题

    canvas有个很强大的api是drawImage()(w3c): 他的主要功能就是绘制图片.视频,甚至其他画布等.   问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完 ...

  6. Canvas drawImage API

    drawImage <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. canvas.drawImage()方法详解

    首先看html5.js /**@param {Element} img_elem@param {Number} dx_or_sx@param {Number} dy_or_sy@param {Numb ...

  8. canvas drawImage 不显示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JS定时器和单线程异步特性

    首先要说的是,定时器相关的方法都是属于BOM方法,而定时器呢,它是用于在设定的时间执行一段代码,或者在给定的时间间隔内重复该代码.具体函数: setTimeout(callback, delay);/ ...

随机推荐

  1. SqlSever基础 order by之后再orderby,双重排序,对排序好的数据中再次进行排序

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  2. pch和info.plist初探

    整理下之前的关于pch和info.plist文件,一下文件部分内容是从传智博客的课件里截取        

  3. 【转载】教你分分钟学会用python爬虫框架Scrapy爬取心目中的女神

    原文:教你分分钟学会用python爬虫框架Scrapy爬取心目中的女神 本博文将带领你从入门到精通爬虫框架Scrapy,最终具备爬取任何网页的数据的能力.本文以校花网为例进行爬取,校花网:http:/ ...

  4. Java获取音频文件（MP3）的播放时长

    最近的一个项目需要按照时间播放mp3文件,例如,播放10分钟的不同音乐. 这就意味着我得事先知道mp3文件的播放时长,以决定播放几遍这个文件. 方案一:Java的方式 找第三方的库,真的感谢这些提供j ...

  5. Trigger Execution Sequence Of Oracle Forms

    Sequence of triggers fires on Commit.1.  KEY Commit2.  Pre Commit3.  Pre/On/Post Delete4.  Pre/On/Po ...

  6. STORM_0007_Multi-Lang protocol of Storm/多语言协议的翻译

    原始地址: http://storm.apache.org/releases/1.0.1/Multilang-protocol.html 这个协议试用0.7.1之后的版本   通过ShellBolt和 ...

  7. C# WinForm程序添加引用后调用静态方法时报“Interfaces_Helper.Global”的类型初始值设定项引发异常。---> System.NullReferenceException: 未将对象引用设置到对象的实例。

    出现原因: 因为Global类初始化某个静态变量时没有成功则会抛 System.NullReferenceException 异常,具体代码: public static string connstr ...

  8. CSS笔记（四）文本

    CSS 文本属性可定义文本的外观.通过文本属性,可以改变文本的颜色.字符间距,对齐文本,装饰文本和对文本进行缩进,等等. 参考:http://www.w3school.com.cn/css/css_t ...

  9. POJ 3104 Drying(二分答案)

    题目链接:http://poj.org/problem?id=3104                                                                  ...

  10. 利用CGLib实现动态代理实现Spring的AOP

    当我们用Proxy 实现Spring的AOP的时候, 我们的代理类必须实现了委托类的接口才能实现. 而如果代理类没有实现委托类的接口怎么办? 那么我们就可以通过CGLib来实现 package cn. ...