Question

下面的代码是在网络上找到的一个例子，有很多这样的例子，但从来没有线条...... 所以我在该代码中添加了一行（当然还有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>

Answer 1

这似乎是IE10中的一个错误。但是，不要依赖于通过重新调整大小来清除它，而是尝试清除此活动中的第二个答案所描述的活动：How to clear the canvas for redrawing

希望有所帮助。

使用行清除响应式画布在IE10中不起作用

1 个答案: