1

我使用“canvas”HTML5 标签创建了 HTML 和 JavaScript 文件来显示项目符号图。我已经在 Chrome 中尝试过了，它运行良好，并且随着浏览器的大小改变宽度。我也必须让这个在 IE8 中工作，所以我使用了 Excanvas，除了一种方式之外，它在所有方面都可以工作：当我调整浏览器的大小时，我得到了 valueIndicator 的残余。这只发生在 IE8 上。

我试过四处寻找有关重绘画布的信息，但我认为这不是问题。谁能看看我哪里出错了，好吗？

编辑 我将完整的代码保留在底部，但是，按照建议我已经将我的代码减少了一些。

在 IE8 中它看起来像这样：

http://dl.dropbox.com/u/6985149/MessedUp.bmp

在 Chrome 中它看起来像这样：

在此处输入图像描述

当我刷新 IE8 页面时，它看起来又正常了。

缩减 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>

完整代码：

缩减 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;
}

子弹图.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>

脚本.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;
}
4

1 回答 1

0

我设法得到了解决方案。感觉有点像黑客，但它确实成功了。基本上它涉及在画布周围绘制一条白线，并在每次再次绘制时填充它。以下代码位于行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";

我已经在完整的代码中尝试过了，它可以工作。如果有人有更优雅的解决方案，我相信肯定有很多，我仍然很想看到它们。

于 2013-01-18T13:33:54.993 回答