javascript - canvas画图问题，为什么init方法画不出来canvas而render可以画出来

问题描述

问 题

var source = {};
  function load_source(url,w,h,type){//返回图片还是canvas
    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.onload = function () {
        this.ctx.drawImage(this.img,0,0);
    }.bind(this);
    this.img.src = url;
    if(type=='canvas')
        return this.canvas;
    else if(type=='img')
        return this.img
}

source.build = new load_source('http://htmljs.b0.upaiyun.com/uploads/1381825919448-6out.png',1024,1024,'canvas');
source.lk = new load_source('http://htmljs.b0.upaiyun.com/uploads/1382543005310-3angles.png',1024,1024,'canvas');
function Map_interpret(){
    this.init = function(){//初始化地图
        this.camera = document.createElement('canvas');//相机
        this.camera.width = 1024;
        this.camera.height = 1024;
        this.ctx = this.camera.getContext('2d');
        document.body.appendChild(this.camera);
         this.ctx.drawImage(source.build,0,0);
    }
    this.render = function(){//初始化地图
        
     this.ctx.drawImage(source.lk,0,0);
    }
    
}
m = new Map_interpret();
m.init();
m.render();

---

临时写的精简的代码可能会报小错误（思路是图片画到canvas里，再把这个canvas画到另一个canvas里，并显示），主要问题是为什么init方法里面的this.ctx.drawImage(source.build,0,0)画出来的canvas不显示，而render里的this.ctx.drawImage(source.lk,0,0);可以画出来

解决方案

说实话，没看懂你在干什么，你load_source函数参数中的type没赋值能返回结果？
还有，把img.src的赋值放到onload函数后面

代码

---

var source = {};

function Map_interpret(){
    this.camera = document.createElement('canvas');//相机
    this.camera.width = 1024;
    this.camera.height = 1024;
    this.ctx = this.camera.getContext('2d');
    document.body.appendChild(this.camera);

    this.init = function(result){//初始化地图
        this.ctx.drawImage(result,0,0);
    };
    this.render = function(result){//初始化地图
         this.ctx.drawImage(result,0,0);
    };
    
}

var m = new Map_interpret();

function load_source(url,w,h,type,callback){//返回图片还是canvas
    callback = callback || function(){};
    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.onload = function () {
        this.ctx.drawImage(this.img,0,0);
        if(type=='canvas'){
            callback(this.canvas);
        }
        else if(type=='img'){
            callback(this.img);
        }
    }.bind(this);
    this.img.src = url;
}

source.build = new load_source(
    'http://htmljs.b0.upaiyun.com/uploads/1381825919448-6out.png',
    1024,
    1024,
    'canvas',
    function(result){
        m.init(result);
});
source.lk = new load_source(
    'http://htmljs.b0.upaiyun.com/uploads/1382543005310-3angles.png',
    1024,
    1024,
    'canvas',
    function(result){
        m.render(result);
});

我这里给你改得有点多，为了让你看得懂，变量什么的我都没改，你这里为什么绘制不出的原因是load_source这里是个异步函数，在你原程序中有两个地方没处理好：

1. m.init和m.reader可能在imgload完成之前就已经执行了

2. 在load_source函数中if语句对type的判断，也就是canvas和img的返回值那里，可能在图片onload完成之前就已经将元素返回

对于异步函数的处理我们目前最好的办法就是回调函数，所以我这里给你加了个回调函数的处理。

下面给你普及点额外知识：

1. 一般ES5你如果想模拟一个类，类的方法（函数）一般都挂载在原型上面

2. 当一个方法或者是引用类型的值可能被调用多次的时候，请务必将其保存为局部变量以提高性能。

3. 对于canvas.width这种dom操作，如果需要频繁用到canvas的大小，请将canvas.width保存到一个变量中以提升性能

当然还有其他的问题，像这种东西只能靠你自己积累，最好是去写一个相关的插件，然后自己给自己找问题，这样提示的速度会更快，以上

---

source.lk = new load_source(
    'http://htmljs.b0.upaiyun.com/uploads/1382543005310-3angles.png',
    1024,
    1024,
    'canvas',
    function(result){
        m.render(result); //把这里的调用改成将结果传值到循环即可，然后m.render在循环里调用变量就行
});

这篇关于javascript - canvas画图问题，为什么init方法画不出来canvas而render可以画出来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！