我的问题是当我使用函数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);
}