0

下面的代码是在网上找到的一个例子，有很多这样的例子，但从来没有线条......所以我在该代码中添加了一行（当然是 BeginPath）。调整窗口大小时，在 IE10 中未正确清除该行。它适用于 Chrome 和 Firefox。

如果是错误，您能否纠正我的错误或帮助我找到解决方法？

感谢您的回答。奥利维尔。

编辑：问题的图像

<!doctype html>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script type="text/javascript">
$(document).ready( function(){

//Get the canvas & context
var c = $('#respondCanvas');
var ct = c.get(0).getContext('2d');
var container = $(c).parent();

    //Run function when browser  resize
    $(window).resize( respondCanvas );

    function respondCanvas(){
        c.attr('width', $(container).width() ); //max width
        c.attr('height', $(container).height() ); //max height

        //Redraw & reposition content
        var x = c.width();
        var y = c.height();             
        ct.font = "20px Calibri";

        ct.fillStyle = "#D0DDDD"; //black
        ct.fillRect( 0, 0, x, y); //fill the canvas

        var resizeText = "Canvas width: "+c.width()+"px";
        ct.textAlign = "center";
        ct.fillStyle = "#333333"; //white
        ct.fillText(resizeText, (x/2), (y/2) );

        //Draw a line
        ct.beginPath;
        ct.moveTo(0,0);
        ct.lineTo(ct.canvas.width/2,100);
        ct.strokeStyle = "#AAAAAA";
        ct.closePath();
        ct.stroke();                
    }
    //Initial call
    respondCanvas();
});
</script>
<style>
html, body{ margin:0px; padding:0px; }
body{ display:block; width:100%; height:100%; }
#main{ display:block; width:80%; padding:50px 10%; height:300px; }
</style>

<body>
<div id="main" role="main">
    <canvas id="respondCanvas" width="100" height="100">
        <!-- Provide fallback -->
    </canvas>
</div>
</body>

</html>
4

1 回答 1

0

这似乎是IE10中的一个错误。但是，不要依赖于通过重新调整大小来清除它，而是尝试清除它的活动，如该线程中的第二个答案所述：如何清除画布以进行重绘

希望有帮助。

于 2013-09-18T13:31:37.013 回答