Question

这对我的所有测试都很有效，但在实时系统上，我遇到了问题。

有三个独立但相同的画布。它们最初都涂有640x480 jpg图像。然后使用新的640x480 jpg图像每秒更新第三个。

出于某种原因，第三个画布的原始静态图像 - 仅限该画布 - 不会从实时服务器加载，仅在测试中加载。

这是html：

    <style>
    .camBox {
        max-width: 28vw;
        width: 28vw;
        height: 21vw;
        max-height: 21vw;
        display: inline-block;
    }
    .camDiv {
        padding: 1.5vw;
        display: inline-block;
    }
    .camBorder {
        border: 0.6vw solid #fe890f;
        border-top-left-radius: 3.3vw;
        border-bottom-right-radius: 3.3vw;
    }
    .camLink {
        color: transparent;
    }
</style>

这是CSS：

    var refreshTimer;
    var imgLiveCam;

    function drawPictureBox(img, canvas, text) {
        var context = canvas.getContext("2d");
        context.drawImage(img, 0, 0, canvas.width, canvas.height);
        context.globalAlpha = 0.6;
        context.fillStyle = "rgb(244,121,32)";
        context.fillRect(0, canvas.height * 0.67, canvas.width, canvas.height * 0.33);
        context.globalAlpha = 1;
        var maxWidth = canvas.width;
        var x = canvas.width / 2;
        var y = canvas.height * 0.85;
        context.font = canvas.width / 12 + 'px Oswald';
        context.strokeStyle = 'black';
        context.lineWidth = 2;
        context.textAlign = "center";
        context.strokeText(text, x, y, maxWidth);
        context.fillStyle = 'white';
        context.fillText(text, x, y, maxWidth);
    };
    function drawCamBox(img, logo, canvas) {
        var context = canvas.getContext("2d");
        context.drawImage(img, 0, 0, canvas.width, canvas.height);
        context.globalAlpha = 0.6;
        context.fillStyle = "rgb(244,121,32)";
        context.fillRect(0, canvas.height * 0.67, canvas.width, canvas.height * 0.33);
        var eSize = canvas.height / 10;
        context.globalAlpha = 1;
        context.drawImage(logo, 2, canvas.height * 0.67 - eSize, eSize, eSize);
        var now = new Date();
        var text = now.toLocaleDateString() + " " + now.toLocaleTimeString();
        var maxWidth = canvas.width * 0.33;
        var x = canvas.width - 10 - maxWidth;
        var y = canvas.height * 0.67 - 10;
        context.font = maxWidth / 10 + "px Arial";
        context.strokeStyle = 'black';
        context.lineWidth = 2;
        context.strokeText(text, x, y, maxWidth);
        context.fillStyle = 'white';
        context.fillText(text, x, y, maxWidth);
        text = 'View Our Production Floor';
        context.textAlign = "center";
        maxWidth = canvas.width;
        x = canvas.width / 2;
        y = canvas.height * 0.85;
        context.font = canvas.width / 12 + 'px Oswald';
        context.strokeText(text, x, y, maxWidth);
        context.fillText(text, x, y, maxWidth);
    }
    function addResizeListener(fn) {
        if (window.attachEvent) {
            window.attachEvent('onresize', fn)
        } else if (window.addEventListener) {
            window.addEventListener('resize', fn, true);
        };
    }
    function initCam() {
        var imgLeft = new Image();
        imgLeft.onload = function () {
            var canvas = document.getElementById("canvasLeft");
            var picBox = document.getElementById("picBoxLeft");
            var drawFn = function () {
                canvas.height = picBox.clientHeight;
                canvas.width = picBox.clientWidth;
                drawPictureBox(imgLeft, canvas, 'Looking for a Scribe?');
            };
            drawFn();
            addResizeListener(drawFn);
        }
        var imgCenter = new Image();
        imgCenter.onload = function () {
            var canvas = document.getElementById("canvasCenter");
            var picBox = document.getElementById("picBoxCenter");
            var drawFn = function () {
                canvas.height = picBox.clientHeight;
                canvas.width = picBox.clientWidth;
                drawPictureBox(imgCenter, canvas, 'Watch In-Depth Videos');
            };
            drawFn();
            addResizeListener(drawFn);
        }
        imgLiveCam = new Image();
        var logo = new Image();
        logo.src = "e.png";
        imgLiveCam.onload = function () {
            var canvas = document.getElementById("canvasRight");
            var picBox = document.getElementById("picBoxRight");
            var drawFn = function () {
                canvas.height = picBox.clientHeight;
                canvas.width = picBox.clientWidth;
                drawCamBox(imgLiveCam, logo, canvas);
            };
            drawFn();
            imgLiveCam.onload = drawFn;
            addResizeListener(drawFn);
        }
        imgLeft.src = "scribe.jpg";
        imgCenter.src = "doc-with-spine.jpg";
        imgLiveCam.src = "camloading.jpg";
        refreshTimer = setTimeout(refresh, 499);
    }
    function refresh() {
        clearTimeout(refreshTimer);
        imgLiveCam.src = "http://cams.edataservices.com/17fcam.jpg?t=" + new Date().getTime();
        refreshTimer = setTimeout(refresh, 1009);
    }

这是JavaScript：

onfocusout: false

任何想法为什么第三幅画布大部分时间都是空白的？

Answer 1

通过在开始刷新周期之前添加更长的延迟，浏览器有更多时间加载初始的“默认”图像。我把它设置为1500毫秒，现在它非常可靠。

（感谢您的帮助...）

图像没有出现在画布上 - 有时候

1 个答案: