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

任何帮助将不胜感激。

解决了这个问题。

我没有检查文档是否已加载，因此在画布上绘制的第一次尝试失败了。

基本！！

这是工作代码的关键部分......

函数初始化（）{

icon1.drawIcon();

icon2.drawIcon();

icon3.drawIcon();

icon4.drawIcon();

icon5.drawIcon();

}

var readyStateCheckInterval = setInterval(function () {

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 回答