Question

我正在为招聘人员进行技术测试，并且遇到了非常烦人的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

非常感谢任何帮助。

解决了问题。

我没有检查文档是否已加载，因此首次尝试绘制画布失败。

基本!!

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

function init（）{

icon1.drawIcon();

icon2.drawIcon();

icon3.drawIcon();

icon4.drawIcon();

icon5.drawIcon();

}

var readyStateCheckInterval = setInterval（function（）{

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);
    }

HTML5 Canvas - 第一次加载时不写入的文本

1 个答案: