javascript - js canvas画图的两个问题
高洛峰
高洛峰 2017-04-11 13:32:55
[JavaScript讨论组]

第一个问题:

把图片加载进CANVAS后,再把canvas加载进JSON,为什么source.B可以用,source.A不可以用?下面是代码

function load_source(url,w,h){
    this.canvas = document.createElement('canvas');
    this.canvas.width = w;
    this.canvas.height = h;
    this.ctx = this.canvas.getContext('2d');
    this.img = new Image();
    this.img.src = url;
        this.img.onload = function () {
            this.ctx.drawImage(this.img,0,0);
        }.bind(this);
    return this.canvas;
}
source.A = load_source('images/player/build1.png',1024,1024);
source.B = load_source('images/player/map1.png',500,500);

第二个问题:

function preImage(url,callback,getarray){  
    var img = new Image(); //创建一个Image对象,实现图片的预下载  
    img.src = url;  
    if (img.complete)
        callback(img,getarray); 
    else{
        img.onload = function () { 
            callback(img,getarray);
        }
    }
}

for循环调用上面为什么不按顺序执行呢?和第一个没关系

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(1)
PHP中文网

第一个
在load_source方法中都用的是this而不是var来申明,调用时也没有使用new来创建新对象
function在js中也是Object
执行了source.A再执行source.B一直都是对同一个对象在操作,所以B覆盖了A

第二个图像的加载是异步的,每个图像大小不一样,加载完毕的时间也不一样,所以调用onload后的callback时间顺序也会不一样。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号