canvas drawImage异步特性

先看代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         canvas {
 8             background: coral;
 9         }
10     </style>
11 </head>
12 <body>
13 <img id="img" src="1.jpg">
14 <canvas id="canvas" width="400" height="400"></canvas>
15 <script src="main.js"></script>
16 </body>
17 </html>

 1 (function () {
 2 
 3     var con = document.getElementById("canvas").getContext("2d");
 4 
 5     var img = document.getElementById("img");
 6 
 7     function render() {
 8         con.drawImage(img, 20, 20, 100, 100, 0, 0, 100, 100);
 9     }
10 
11     render();
12 })();

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

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

解决此问题

 1 (function () {
 2 
 3     var con = document.getElementById("canvas").getContext("2d");
 4 
 5     var img = document.getElementById("img");
 6 
 7     function render() {
 8         con.drawImage(img, 20, 20, 100, 100, 0, 0, 100, 100);
 9         requestAnimationFrame(render);
10     }
11 
12     render();
13 })();

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

）

posted @ 2016-10-10 20:35 晨落梦公子阅读(3182) 评论(0) 编辑收藏举报

晨落梦公子

canvas drawImage异步特性

公告