先看代码：
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 })();
这就行了，（吐槽：每次都刷新，还不信你不出来，异步我也得把你整出来。。
）