Question

我使用'canvas'HTML5标签创建了HTML和JavaScript文件以显示子弹图。我已经在Chrome中尝试过，它可以很好地工作，并随着浏览器的大小而改变宽度。我必须在IE8中使用它，所以我使用了Excanvas，除了一种方式之外它在所有方面工作：当我调整浏览器大小时，我得到了valueIndicator的残余。这只发生在IE8上。

我已经尝试了解有关重绘画布的信息，但我不认为这是问题所在。谁能看到我出错的地方，好吗？

修改我将完整的代码保留在底部，但是，遵循建议我已经减少了我的代码。

在IE8中它看起来像这样：

在Chrome中，它看起来像这样：

enter image description here

当我刷新IE8页面时，它再次看起来不错。

Cut-down Bulletgraph.html：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bulletgraph</title>
        <!--[if IE]><script src="excanvas.js"></script><![endif]-->
    </head>
    <body>
        <canvas id="graph1"></canvas>
        <script src="Scripts.js"></script>
        <script>
            drawGraphs();
            window.onresize=function() { drawGraphs() };

            function drawGraphs() {
                drawBulletGraph(getScreenWidth(),300,1000,350,"graph1");
            }
        </script>
    </body>
</html>

完整代码：

Cut-down Scripts.js：

function drawBulletGraph (cwidth, left, right, loValue, id) {
    var canvas=document.getElementById(id);
    var cheight=30;

    var multiplier=cwidth/(right-left);
    canvas.width=cwidth;
    canvas.height=cheight;

    var valueIndicator=canvas.getContext("2d");
    valueIndicator.lineWidth="1";
    valueIndicator.moveTo((loValue-left)*multiplier,0);
    valueIndicator.lineTo((loValue-left)*multiplier,cheight);
    valueIndicator.fill();
    valueIndicator.stroke();
}

function getScreenWidth () {
    return (window.innerWidth || document.documentElement.clientWidth)/7;
}

Bulletgraph.html：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bulletgraph</title>
        <!--[if IE]><script src="excanvas.js"></script><![endif]-->
    </head>
    <body>
        <canvas id="graph1"></canvas><br>
        <canvas id="graph2"></canvas>
        <script src="Scripts.js"></script>
        <script>
            drawGraphs();
            window.onresize=function() { drawGraphs() };

            function drawGraphs() {
                drawBulletGraph(bgWidth(getScreenWidth()),300,400,450,600,700,1000,800,350,850,"graph1");
                drawBulletGraph(bgWidth(getScreenWidth()),250,450,500,650,700,1200,600,350,850,"graph2");
            }
        </script>
    </body>
</html>

scripts.js中：

function drawBulletGraph (cwidth, left, loRed, loAmber, hiAmber, hiRed, right, value, loValue, hiValue, id) {
    var canvas=document.getElementById(id);
    var cheight=16;
    var colour="#008000";
    if (value <= loRed || value >= hiRed)
        {
            colour="#FF0000";
        }
    else if (value <= loAmber || value >= hiAmber)
        {
            colour="#FFA500";
        }
    var multiplier=cwidth/(right-left);
    canvas.width=cwidth;
    canvas.height=cheight;
    var red=canvas.getContext("2d");
    red.fillStyle="#F4C3C6";
    red.fillRect(0,0,cwidth,cheight);
    var amber=canvas.getContext("2d");
    amber.fillStyle="#F4F6C6";
    amber.fillRect((loRed-left)*multiplier,0,(hiRed-loRed)*multiplier,cheight);
    var green=canvas.getContext("2d");
    green.fillStyle="#CCE5CC";
    green.fillRect((loAmber-left)*multiplier,0,(hiAmber-loAmber)*multiplier,cheight);
    var valueIndicator=canvas.getContext("2d");
    valueIndicator.fillStyle=colour;
    valueIndicator.strokeStyle=colour;
    valueIndicator.lineWidth="2";
    valueIndicator.moveTo((loValue-left)*multiplier,0);
    valueIndicator.lineTo((loValue-left)*multiplier,cheight);
    valueIndicator.moveTo((loValue-left)*multiplier,cheight/2);
    valueIndicator.lineTo((hiValue-left)*multiplier,cheight/2);
    valueIndicator.moveTo((hiValue-left)*multiplier,0);
    valueIndicator.lineTo((hiValue-left)*multiplier,cheight);
    valueIndicator.moveTo(((value-left)*multiplier)-(cheight/2),cheight/2);
    valueIndicator.stroke();
    valueIndicator.lineWidth="1";
    valueIndicator.lineTo((value-left)*multiplier,cheight);
    valueIndicator.lineTo(((value-left)*multiplier)+(cheight/2),cheight/2);
    valueIndicator.lineTo((value-left)*multiplier,0);
    valueIndicator.lineTo(((value-left)*multiplier)-(cheight/2),cheight/2);
    valueIndicator.fill();
    valueIndicator.stroke();
}

function getScreenWidth () {
    return window.innerWidth || document.documentElement.clientWidth;
}

function bgWidth (screenWidth) {
    var graphWidth=screenWidth/7;
    if (graphWidth<70) {graphWidth=70;}
    if (graphWidth>260) {graphWidth=260;}
    return graphWidth;
}

Answer 1

我设法找到了解决方案。这感觉有点像黑客，但它确实有把戏。基本上它涉及在画布周围绘制一条白线，并在每次再次绘制时填充它。以下代码介于var valueIndicator=canvas.getContext("2d");和valueIndicator.lineWidth="1";行之间：

valueIndicator.fillStyle="#FFFFFF";
valueIndicator.strokeStyle="#FFFFFF";
valueIndicator.moveTo(0,0);
valueIndicator.beginPath();
valueIndicator.lineTo(0,cheight);
valueIndicator.lineTo(cwidth,cheight);
valueIndicator.lineTo(cwidth,0);
valueIndicator.closePath();
valueIndicator.fill();
valueIndicator.stroke();
valueIndicator.strokeStyle="#000000";

我已经在完整的代码中尝试了它并且它有效。如果有人有一个更优雅的解决方案，而且我肯定必须有很多，我仍然希望看到它们。

Internet Explorer 8弄乱我的子弹

1 个答案: