1

私は採用担当者のために技術テストを行っていて、html5/canvas/javascript で非常に迷惑なバグに遭遇しました。

この問題は断続的にのみ発生し、通常はページの最初の読み込み時にのみ発生します。

画像はすべて正常に読み込まれますが、ページを手動でリロードしたときにのみ 3 文字のコードが読み込まれます。

コールバックと setTimeout を追加しようとしましたが、初期ロードで何かが発生しているように見えますが、トラップできません。

これが私のコードです：

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）;

4

1 に答える 1

2

あなたはこのようにそれをするべきです：

    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);
    }
于 2012-10-26T18:57:50.647 に答える