canvas drawImage異步特性

本文轉載自查看原文 2016-10-10 20:35 1819 HTML 5

先看代碼：

 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 })();

這就行了，（吐槽：每次都刷新，還不信你不出來，異步我也得把你整出來。。

）

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Canvas的drawImage方法使用小程序canvas繪圖，promise異步處理drawImage()圖片無法顯示 canvas性能-drawImage渲染圖片 canvas drawImage繪圖實現contain和cover的效果在

HTML5 Canvas繪圖詳解 drawImage() 方法有圖有真相！ canvas調用scale或者drawImage圖片操作后，鋸齒感很明顯的解決 H5新特性之canvas ES 新特性、異步、TypeScript servlet3.0 新特性——異步處理