先看代码：

 <!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. Storm系列之三——Fault Tolerance

    本文介绍Storm容错的设计细节. 1.当一个worker进程死了会发生什么? 当worker死了,supervisor会重启它.如果它尝试开启多次失败并且不能与nimbus发送心跳,Nimbus会重 ...

  2. 编译android源码官方教程(1)硬件、系统要求

    https://source.android.com/source/requirements.html Requirements IN THIS DOCUMENT Hardware requireme ...

  3. QT笔记之VS2010 Qt中导入qrc资源文件

    转载1:http://qimo601.iteye.com/blog/1404693 转载2:http://blog.sina.com.cn/s/blog_92cde3060101lobm.html 转 ...

  4. Virtualenv: 一个Python环境管理工具（windown版本）

    1.安装virtualenv 在安装virtualenv之前,我们需要安装至少有一个版本的python:因为virtualenv是python的一个第三方模块,必须基于python环境才能安装: 如果 ...

  5. oracle数据库中提供的5种约束

    约束作用:用来保持数据的完整性,防止无效数据进入到数据库中.oracle数据库中提供的5种约束,都是限定某个列或者列的组合的.1.主键约束(PRIMARY KEY):在一个表中能唯一的标识一行.主键可 ...

  6. jquery动态样式操作

    获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: 1 var p_class = $(" ...

  7. NoSQL聚合数据模型

    NoSQL聚合数据模型 特点 聚合数据模型的特点就是把经常访问的数据放在一起(聚合在一块): 这样带来的好处很明显,对于某个查询请求,能够在与数据库一次交互中将所有数据都取出来: 当然,以这种方式存储 ...

  8. hdu 4165 Pills dp

    Pills Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Problem De ...

  9. Python基础学习笔记（八）常用字典内置函数和方法

    参考资料: 1. <Python基础教程> 2. http://www.runoob.com/python/python-dictionary.html 3. http://www.lia ...

  10. unity3d vs2012

    Unity3D自带的MonoDevelop编辑器无论是js还是c#代码提示都很差,很诡异的就是变量名和方法名有的时候提示有的时候不提示.不过用Visual Studio代替MonoDevelop这个问 ...