@hero564

Почему не работает ctx.drawImage?

Здраствуйте подскажите почему может не работать ctx.drawImage (просто не рисует картинку), в то время как ctx.fillRect работает исправно.

function Game(canv_width,canv_height){
	//set the canvas attributes
	this.width=canv_width,
	this.height=canv_height,
	//create canvas elements
	this.canvas=document.createElement("CANVAS"),
	//set canvas width
	this.canvas.width=this.width,
	//set canvas height
	this.canvas.height=this.height,
	//push created <canvas> tag in <body>
	document.body.appendChild(this.canvas),
	//get the context
	this.context=this.canvas.getContext('2d')
};

//Image object with draw function without else properties
//path-path to image file
function HImage(path){
	//create new Image and set path to file
	this.img=new Image(),
	this.img.src=path,
	//flag of loading image
	this.isLoad=false,
	
	//when image is load
	this.setToTrue=function(){
		//set flag to true
		this.isLoad=true;
	},
	this.img.onload=this.setToTrue(),
	
	//drawing image in position px,py. game_object - object of Game class
	this.draw=function(game_object,px,py){
		//if image is load
		if (this.isLoad==true){
			//draw the image in position
			//game_object.context.fillStyle='#FFCCFF';
			//game_object.context.fillRect(0,0,100,100);
			game_object.context.drawImage(this.img,px,py);
			
		}
	}
};

var game=new Game(800,600);
image=new HImage('img.png');
image.draw(game,200,200);
  • Вопрос задан
  • 1081 просмотр
Решения вопроса 1
twobomb
@twobomb
Пример работы https://jsfiddle.net/etdjojkj/
function Game(canv_width,canv_height){
  //set the canvas attributes
  this.width=canv_width,
  this.height=canv_height,
  //create canvas elements
  this.canvas=document.createElement("CANVAS"),
  //set canvas width
  this.canvas.width=this.width,
  //set canvas height
  this.canvas.height=this.height,
  //push created <canvas> tag in <body>
  document.body.appendChild(this.canvas),
  //get the context
  this.context=this.canvas.getContext('2d')
};

//Image object with draw function without else properties
//path-path to image file
function HImage(path){
  //create new Image and set path to file
  this.img=new Image();
  this.img.src=path;
  var _this = this;//Добавил тут кое-что
  //flag of loading image
  this.isLoad=false;
  //when image is load
  this.setToTrue=function(){
    //set flag to true
    this.isLoad=true;
  },
  this.img.onload=this.setToTrue();
  
  //drawing image in position px,py. game_object - object of Game class
  this.draw=function(game_object,px,py){
    //if image is load
    if (this.isLoad==true){
      //draw the image in position
      //game_object.context.fillStyle='#FFCCFF';
      //game_object.context.fillRect(0,0,100,100);
      game_object.context.drawImage(_this.img,px,py);//И тут заменил this На _this созданный ранее, так как в функции это не тот this о котором ты подумал
      
    }
  }
};

var game=new Game(800,600);
image=new HImage('http://facebookcovers.piz18.com/wp-content/uploads/2012/04/Audi-R8-Super-Car.jpg');
image.draw(game,200,200);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы