为什么我的画布只在Chrome DevTools面板打开时才更新？

2024-10-02 10:23:12 发布

您现在位置：Python中文网/ 问答频道 /正文
5123 3

我有一个python项目，它使用本地http服务器公开了一个网络摄像头和一个图表框架。我不明白为什么只有当chrome devtools面板打开时我的画布才会被刷新。我使用requestAnimationFrameAPI来调度python服务器发出的2个图像请求（网络摄像头和图表框架）。加载后，画布将显示这些图像。你知道吗

我的HTML页面：

<html>
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="data:,">
    <script type='text/javascript'>
var imgElem;
var imgCanvas;
var chart;
var ctx;
var rafID = 0;
var counter = 0;
var boxX = 0, boxY = 0;



function E(n) {return document.getElementById(n);}

function stopRunner () 
{
    if (rafID) {
        window.cancelRequestAnimationFrame(rafID);
        rafID = 0;
    }
}

function onLoadImage()
{
    with(ctx) {
        if (boxX == 0) {
            boxX = imgElem.width/2;
            boxY = imgElem.height/2;
            with(E("myCanvasCont"))
            {
                style.width = imgElem.width;
                style.height = imgElem.height;
            }
            with(imgCanvas)
            {
                width = imgElem.width;
                height = imgElem.height;
            }
        }
        drawImage(imgElem, 0, 0);
        lineWidth = 1;
        strokeStyle = "#fff";
        strokeRect(boxX-25,boxY-25,50,50);
        strokeStyle = "#777";
        strokeRect(boxX-26,boxY-26,52,52);
    }
}

function getOneImage(timestamp)
{
    var now =  new Date().getTime();
    if (counter++ % 4 == 0) {
        imgElem.src = "get#" + now;
    }
    chart.src= "chart#" + now;

    rafID = window.requestAnimationFrame(getOneImage);

}

function getAbsLeftTop(elem)
{
    var p = elem.offsetParent;
    var l = elem.offsetLeft;
    var t = elem.offsetTop;
    while (p) {
        l += p.offsetLeft;
        t += p.offsetTop;
        p = p.offsetParent;
    }
    return [l, t];
}

function clicked (evt) 
{
    var mx = evt.clientX;
    var my = evt.clientY;
    var lt = getAbsLeftTop(imgCanvas);
    boxX = mx - lt[0];
    boxY = my - lt[1];
    E('inpx').value = boxX;
    E('inpy').value = boxY;

    E('form1').submit();
}

function startAll ()
{
    chart = E("chart")
    imgElem = document.createElement("img");
    imgElem.onload = onLoadImage;
    imgElem.src = "get";
    var cont = E("myCanvasCont");
    imgCanvas = document.createElement("canvas");
    imgCanvas.onclick = clicked;
    ctx = imgCanvas.getContext("2d");
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    cont.appendChild(imgCanvas);
    window.onbeforeunload = stopRunner;
    rafID = window.requestAnimationFrame(getOneImage);
}

    </script>
</head>
<body>
    <h1>Breathing Rate Monitor </h1>
    <table>
        <tr><td>
            Use mouse to click on the image to<br>
            find best spot to monitor.<br>
            For example, area between chin and chest.
            </td>
            <td></td>&nbsp;
        <tr><td>
                <div id='myCanvasCont'></div>
            </td>
            <td>
                <img id='chart' src='chart'>
            </td>
    </table>

    <hr>
    This page was originally created by Shui Hung Kwok, 2014-03-09 and proudly modified by Brun0oO, 2019-07-25 ;o)

    <form id='form1' target='f1' action='clicked'>
        <input type='hidden' name='inpx' id ='inpx'>
        <input type='hidden' name='inpy' id ='inpy'>
        <input type='hidden' name='sigma' id ='sigma' value='0.2'>
    </form>
    <iframe name='f1' style='display:none'></iframe>
    <script>startAll();</script>
</body>
</html>

我的完整项目位于： https://github.com/Brun0oO/breathingMonitor

欢迎任何帮助。。。你知道吗


Tags： idvartypechartscriptfunctionwidthtd
0条回答

目前没有回答

相关问题 更多 >

    编程相关推荐

    热门问题