canvas drawImage异步特性

最新推荐文章于 2023-10-08 18:02:34 发布

weixin_30730053

最新推荐文章于 2023-10-08 18:02:34 发布

阅读量782

点赞数

原文链接：http://www.cnblogs.com/chenluomenggongzi/p/5947181.html

版权

先看代码：

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

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

）

转载于:https://www.cnblogs.com/chenluomenggongzi/p/5947181.html

weixin_30730053

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas drawImage异步特性

先看代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 canvas {...
复制链接

扫一扫