クラスはキャンバスに描画されません

新しいEcma6クラスシステムを使用してキャンバスに描画しようとしていましたが、多くの研究の後では動作したくありません。私は描画関数のパラメーターとしてコンテキストを渡しています。コンテキストをログに記録しても、空でも定義されていないとは言えません。素敵な人が私を助けることができますか？クラスはキャンバスに描画されません

これは私のコードです：

class Canvas { 
    constructor() { 
     this.canvas = document.getElementById('canvas'); 
     this.context = this.canvas.getContext('2d'); 
     this.width = this.canvas.width; 
     this.height = this.canvas.height; 
     this.components = []; 
    } 

    draw() { 
     this.context.clearRect(0, 0, this.width, this.height); 
     this.context.globalCompositeOperation = 'hard-light'; 

     this.components.map(e => e.draw(this.context)); 

     window.requestAnimationFrame(this.draw.bind(this)); 
    } 

    add(e) { 
     this.components.push(e); 

     this.components.sort(function (a, b) { 
      return a.layer - b.layer; 
     }); 
    } 

    listeners() { 
     window.addEventListener('resize',() => { 
      this.width = this.canvas.width; 
      this.height = this.canvas.height; 
     }, false); 
    } 

    init() { 
     this.listeners(); 
     this.draw(); 
    } 
} 

class CanvasElement { 
    constructor(x, y, height, width, layer) { 
     this.position = { 
      x: x, 
      y: y 
     } 
     this.height = height; 
     this.width = width; 
     this.layer = layer; 
     this.color = "grey"; 
    } 

    draw(context) { 
     context.fillStyle = this.color; 
     context.fillRect(this.x, this.y, this.width, this.height); 
    } 
} 

class CanvasImage extends CanvasElement { 
    constructor(x, y, image, context) { 
     super(x, y, image.width, image.height, 0); 
     let self = this; 
     this.image = new Image(); 
     this.image.onload = function() { 
      self.imageReadyToUse = true; 
      self.width = this.width; 
      self.height = this.height; 
     } 
     this.image.src = image; 
     this.imageReadyToUse = false; 

    } 

    draw(context) { 
     if (this.imageReadyToUse) { 
      context.drawImage(this.image, this.x, this.y); 
     } 
    } 
}

出典

2016-11-07 Lorenzo Kramer

コンソールにエラーが表示されますか？ – Stuart

コンソールにエラーまたは警告はありません。 –

あなたのエラーがdrawImageメソッド内の位置に位置しています。 this.xおよびthis.yの値はundefinedです。ここで

は実施例である：

var imageURL = "data:image/gif;base64,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"; 
 

 
class Canvas { 
 
     constructor() { 
 
      this.canvas = document.getElementById('canvas'); 
 
      this.context = this.canvas.getContext('2d'); 
 
      this.width = this.canvas.width; 
 
      this.height = this.canvas.height; 
 
      this.components = []; 
 
     } 
 
    
 
     draw() { 
 
      this.context.clearRect(0, 0, this.width, this.height); 
 
      this.context.globalCompositeOperation = 'hard-light'; 
 
    
 
      this.components.map(e => e.draw(this.context)); 
 
    
 
      window.requestAnimationFrame(this.draw.bind(this)); 
 
     } 
 
    
 
     add(e) { 
 
      this.components.push(e); 
 
    
 
      this.components.sort(function (a, b) { 
 
       return a.layer - b.layer; 
 
      }); 
 
     } 
 
    
 
     listeners() { 
 
      window.addEventListener('resize',() => { 
 
       this.width = this.canvas.width; 
 
       this.height = this.canvas.height; 
 
      }, false); 
 
     } 
 
    
 
     init() { 
 
      this.listeners(); 
 
      this.draw(); 
 
     } 
 
    } 
 
    
 
    class CanvasElement { 
 
     constructor(x, y, height, width, layer) { 
 
      this.position = { 
 
       x: x, 
 
       y: y 
 
      } 
 
      this.height = height; 
 
      this.width = width; 
 
      this.layer = layer; 
 
      this.color = "grey"; 
 
     } 
 
    
 
     draw(context) { 
 
      context.fillStyle = this.color; 
 
      context.fillRect(this.x, this.y, this.width, this.height); 
 
     } 
 
    } 
 
    
 
    class CanvasImage extends CanvasElement { 
 
     constructor(x, y, size, context) { 
 
      super(x, y, size.width, size.height, 0); 
 
      let self = this; 
 
      this.context = context; 
 
      this.image = new Image(); 
 
      this.image.onload = function() { 
 
       self.imageReadyToUse = true; 
 
       self.width = this.width; 
 
       self.height = this.height; 
 
       self.draw(); 
 
      } 
 
      this.image.src = imageURL; 
 
      this.imageReadyToUse = false; 
 
     } 
 
    
 
     draw() { 
 
      if (this.imageReadyToUse) { 
 
       console.log("YOU ARE UNDEFINED:", this.x, this.y); 
 
       this.context.drawImage(this.image, 0, 0, 61, 68); 
 
      } 
 
     } 
 
    } 
 

 
var canvas = new Canvas(); 
 
var canvasImage = new CanvasImage(0, 0, {width:61, height:68}, canvas.context); 
 
canvasImage.draw();

<canvas style="border:1px solid grey" id="canvas" width="400" height="400"></canvas> 
 
sdsdc

出典

2016-11-07 11:28:40

私はイメージが何かを追加しないでください、イメージはURI文字列です。 var canvasImage = new CanvasImage（0、0、 "images/BapeCat.jpg"）; –

しかし、これを見て、エラーがなければならない： 'スーパー（X、Y、image.width、image.height、0）;' と 'this.image.src =画像;' だから、あなたが上がりません文字列を渡す。さもなければ、あなたは幅にアクセスすることによって未定義になるでしょう。 –

最初は、それは本当ですが、私はそれを修正しました。しかし、それはとにかくオンロード後に修正されるでしょう。しかし、fillRectは機能しません。 –

だから私は、問題が何であったかが分かりました。 this.xとthis.yを使用する代わりにthis.position.xとthis.position.yを使用しなければなりませんでした。

ありがとうございました！

出典

2016-11-07 13:08:33

クラスはキャンバスに描画されません

答えて

関連する問題