Javascript Canvas DrawImage消除了普通状态

时间:2016-10-29 14:14:24

标签: javascript reactjs canvas

我的问题是当我使用函数drawImage()画布上的previus图像已经消失。我怎样才能在画布上重塑普通状态?

我用反应。

我尝试使用save()和restore(),但这对我没有帮助。

我的代码是:

updateCanvas(size, map, src) {
    var PSI = 256;
    var BSI = 16;
    var IZ = PSI;

    var  crop_canvas = document.getElementById('myCanvas').getContext('2d');//this.refs.canvas.getContext('2d');
    console.log(crop_canvas);

    if(this.state.widthCanvas < size[0]) {
        this.setState({
            widthCanvas: size[0]
        });
    }

    var oiw = size[0];
    var iw = (oiw + PSI - 1) & ~(PSI - 1);
    var dmap = map;
    var pos_x = 0;
    var pos_y  =  this.state.heightCanvas;
    var myImage = [];
    var loadnumber = this.state.loadNumber;
    myImage[loadnumber] = new Image();

    this.setState({
        heightCanvas: this.state.heightCanvas+size[1]
    });

    myImage[loadnumber].src = src;
    myImage[loadnumber].onload = function(e){
        $.each(dmap, function(index, value){

            var cord = [];
            var y = (value / (iw / PSI)) | 0;
            var x = (value % (iw / PSI)) | 0;
            cord[0] = (x * PSI);
            cord[1] = (y * PSI);

            var cut_x = ((cord[0] * (2 * BSI + PSI) / PSI + BSI) * IZ / (PSI)) | 0;
            var cut_y = ((cord[1] * (2 * BSI + PSI) / PSI + BSI) * IZ / (PSI)) | 0;

            crop_canvas.drawImage(myImage[loadnumber] , cut_x, cut_y, PSI, PSI,  pos_x, pos_y, PSI, PSI);

            pos_x=pos_x+PSI;
            if(pos_x > oiw){
                pos_y=pos_y+PSI;
                pos_x = 0;
            }
        });
        var that = this;
        setTimeout(function(){
            that.LoaderImage(parseInt(that.state.loadNumber)+1);
        },1000);
    }.bind(this);

}

0 个答案:

没有答案