canvas drawImage异步特性
先看代码：
<!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异步特性的更多相关文章
- Servlet 3.0异步特性初探
Servlet 是 Java 为了编写服务端程序而定义的一个接口规范,在 Servlet 3.0 以后支持了异步的操作. 最近项目添加了一个代码热部署的功能,在客户端输入信号,信号到达 Web 服务器 ...
- ES7中前端异步特性：async、await。
在最新的ES7(ES2017)中提出的前端异步特性:async.await. 什么是async.await? async顾名思义是"异步"的意思,async用于声明一个函数是异步的 ...
- <canvas>drawImage()方法无法显示图片
在书上看到用<canvas>绘制图像就动手试试,刚开始,我的代码是这样的: <!DOCTYPE html> <html> <head> <meta ...
- Canvas DrawImage截取和压缩图片的陷阱
html5的canvas十分之强大,可以做到快速的截取压缩出新的图片! 不过最近开发过程中遇到一个问题,图片压缩后使用toDataURL取得图片显示为一片漆黑,什么都没有! 折腾了很久,起初以为是上传 ...
- canvas - drawImage()方法绘制图片不显示的问题
canvas有个很强大的api是drawImage()(w3c): 他的主要功能就是绘制图片.视频,甚至其他画布等. 问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完 ...
- Canvas drawImage API
drawImage <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- canvas.drawImage()方法详解
首先看html5.js /**@param {Element} img_elem@param {Number} dx_or_sx@param {Number} dy_or_sy@param {Numb ...
- canvas drawImage 不显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS定时器和单线程异步特性
首先要说的是,定时器相关的方法都是属于BOM方法,而定时器呢,它是用于在设定的时间执行一段代码,或者在给定的时间间隔内重复该代码.具体函数: setTimeout(callback, delay);/ ...
随机推荐
- Objective C 基础
1,字符串加@: 不加@的是C语言字符串. 加@的代表的是OC的NSString http://www.jikexueyuan.com/course/71_2.html 2,setValuesForK ...
- nl2br
PHP中 在字符串所有新行之前插入 HTML 换行标记 说明 string nl2br ( string $string [, bool $is_xhtml = true ] ) 在字符串 str ...
- CUBRID学习笔记 13 日志文件
欢迎转载 ,转载时请保留作者信息.本文版权归本人所有,如有任何问题,请与我联系wang2650@sohu.com . 过错 CUBRID Broker Log Files 可以理解为数据库中间件日志 ...
- 现在有T1、T2、T3三个线程，怎样保证T2在T1执行完后执行，T3在T2执行完后执行？使用Join
public class TestJoin { public static void main(String[] args) { Thread t1 = new Thread(new T1(), &q ...
- Simulating a Fetch robot in Gazebo
Installation Before installing the simulation environment, make sure your desktop is setup with a st ...
- python_way day11 自定义线程池
python_way day11 线程池 为什么需要线程池 线程多一些固然好,但是过多的线程反倒影响系统的负荷,所以我们就需要创建合适多的线程,哪我们把线程放到哪里?这时就放到线程池中. 线程池中存放 ...
- C# 线程（五）：线程池
From : http://kb.cnblogs.com/page/42531/ 在多线程的程序中,经常会出现两种情况: 一种情况: 应用程序中,线程把大部分的时间花费在等待状态,等待某个事件发生,然 ...
- LTE Module User Documentation（翻译5）——Mobility Model with Buildings
LTE用户文档 (如有不当的地方,欢迎指正!) 8 Mobility Model with Buildings 我们现在通过例子解释如何在 ns-3 仿真程序中使用 buildings 模型(特别 ...
- 2013 Multi-University Training Contest 6
HDU-4655 Cut Pieces 题意:有N个格子能够被涂色,每个格子能够涂1-ai 种颜色,当N=6,涂色方案:112233 认为方案中共有3个颜色块:涂色方案:121212 认为方案中共有6 ...
- iOS - UITabBarController
前言 NS_CLASS_AVAILABLE_IOS(2_0) @interface UITabBarController : UIViewController <UITabBarDelegate ...