关于canvas无法通过drawImage加载的原因

来源:互联网 发布:淘宝卖飞机 编辑:程序博客网 时间:2024/05/21 22:43

在使用drawImage方法的时候,发现无法加载

                var can = $('#mycanvas')[0];                var cxt = can.getContext('2d');                var bg = new Image();                bg.src = "img/bg.jpg";                cxt.drawImage(bg, 0, 0);

原因是图片的加载时异步的。在资源还没有加载完成的时候就执行了drawImage所以无法成功加载到画布当中。正确的写法应该是保证图片在onload以后才调用drawImage,而不是网上说的window.onload,因为我们的文档中并没有IMG元素

    var can = $('#mycanvas')[0];                var cxt = can.getContext('2d');                var bg = new Image();                bg.src = "img/bg.jpg";                //图片资源加载时异步的。必须保证图片资源加载完成后才行                bg.onload = function() {                    cxt.drawImage(bg, 0, 0);                }
原创粉丝点击