HTML5畫布 - 文字不寫在第一次加載

Question

我正在做一個招聘人員的技術測試，並遇到過，非常惱人的HTML5 /帆布/ JavaScript的錯誤。

該問題只是間歇性地發生，通常只在頁面的第一次加載時纔會發生。

圖像全部加載正常，但只有當我手動重新加載頁面時纔會加載3個字符的代碼。

我已經嘗試添加回調，甚至setTimeout但有appeasr是發生在初始加載的東西，但我不能陷入它。

這裏是我的代碼：

function Rectangle() { 

    this.w = 111; 
    this.h = 111; 
    this.font_color = "white"; 
    this.font_family = "18pt Novecentowide"; 

} 

Icon.prototype = new Rectangle(); 

function Icon(data) { 

    this.code = data['code']; 
    this.bg_color = data['bg_color']; 
    this.x = data['x']; 
    this.y = data['y']; 
    this.code_x = data['code_x']; 
    this.code_y = data['code_y']; 
    this.icon_src = data['icon_src']; 
    this.icon_x = data['icon_x']; 
    this.icon_y = data['icon_y']; 

    this.drawIcon = function() { 

     // setup canvas 
     var c = document.getElementById("canvasId"); 
     var ctx = c.getContext("2d"); 

     // draw rectangle 
     ctx.fillStyle = this.bg_color; 
     ctx.fillRect(this.x, this.y, this.w, this.h); 

     // apply icon 
     var img = new Image(); 
     img.src = this.icon_src; 

     var icon_x = this.icon_x; 
     var icon_y = this.icon_y; 

     // get text values 
     var font_color = this.font_color; 
     var font_family = this.font_family; 
     var code = this.code; 
     var code_x = this.code_x; 
     var code_y = this.code_y; 

     img.onload = function() { 
     // Once the image has finished loading, draw the 
     // image and then the text. 

      function DrawScreen() { 
       ctx.drawImage(img, icon_x, icon_y); 
      } 

      DrawScreen(); 

     }; 

     function DrawText() { 
      ctx.fillStyle = font_color; 
      ctx.font = font_family; 
      ctx.fillText(code, code_x, code_y); 
     } 

     DrawText(); 

    } 

} 

var icon1 = new Icon({code: "ABC", bg_color: "c64918", x: 0, y: 0, code_x: 13, code_y: 98, icon_src: "images/shape_icon.png", icon_x: 0, icon_y: 0 }); 

var icon2 = new Icon({code: "DEF", bg_color: "d37724", x: 195, y: 0, code_x: 208, code_y: 98, icon_src: "images/shape_icon.png", icon_x: 195, icon_y: 0 }); 

var icon3 = new Icon({code: "GHI", bg_color: "556a70", x: 0, y: 151, code_x: 13, code_y: 249, icon_src: "images/hand_icon.png", icon_x: 0, icon_y: 151 }); 

var icon4 = new Icon({code: "JKL", bg_color: "55777f", x: 195, y: 151, code_x: 208, code_y: 249, icon_src: "images/hand_icon.png", icon_x: 195, icon_y: 151 }); 

var icon5 = new Icon({code: "MNO", bg_color: "68a03d", x: 0, y: 303, code_x: 13, code_y: 400, icon_src: "images/dollar_icon.png", icon_x: 0, icon_y: 303 }); 

icon1.drawIcon(); 

icon2.drawIcon(); 

icon3.drawIcon(); 

icon4.drawIcon(); 

icon5.drawIcon(); 

任何人都可以闡明爲什麼發生這種情況的一些情況。

鏈接到演示是：http://www.mpwa.co/html5

任何幫助將是非常讚賞。

---

解決了這個問題。

我沒有檢查文檔是否已經加載，所以第一次嘗試在畫布上繪圖失敗。

基本知識！

這裏的工作代碼的關鍵部分...

---

功能的init（）{

icon1.drawIcon(); 

icon2.drawIcon(); 

icon3.drawIcon(); 

icon4.drawIcon(); 

icon5.drawIcon(); 

}

VAR readyStateCheckInterval =的setInterval（函數（）{

if (document.readyState === "complete") { 

    init(); 

    clearInterval(readyStateCheckInterval); 

} 

}，10）;

---

Answer 1

你應該做的是這樣的：

img.onload = function() { 
    // Once the image has finished loading, draw the 
    // image and then the text.   
     DrawScreen(); 
     DrawText(); 
    }; 
    function DrawScreen() { 
     ctx.drawImage(img, icon_x, icon_y); 
    } 
    function DrawText() { 
     ctx.fillStyle = font_color; 
     ctx.font = font_family; 
     ctx.fillText(code, code_x, code_y); 
    }