响应式jQuery画布，画布背景在窗口调整大小时消失

Question

我正在尝试创建一个具有背景图像的响应式画布。 我在这里创建了一个有问题的codepen： http ://codepen.io/eternalminerals/pen/avZBOr

我试图使此画布具有响应性，这意味着当我调整窗口大小时，背景中的图像也会重新调整大小，但是当您调整窗口大小时，图像会完全消失。

任何帮助，将不胜感激！ Codepen中有问题。 谢谢。

这是JavaScript：

$(document).ready(function( $ ) {
var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = 934;
canvas.height = 622;


var background = new Image();
var width = 200;
var height = 137;
background.src = "http://eternalminerals.com/wp-content/uploads/2014/03/mg-balance2.gif";

background.onload = function(){
    ctx.drawImage(background,0,0,canvas.width, canvas.height);   
}
});

$(document).ready(function( $ ) {
    //Get the canvas &
    var c = $('#canvas');
    var ct = c.get(0).getContext('2d');
    var container = $(c).parent();

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

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

        //Call a function to redraw other content (texts, images etc)
    }

    //Initial call 
    respondCanvas();

}); 

Answer 1

看起来您可能需要在调整窗口大小时重新绘制图像。

ct.drawImage(background, 0, 0, $(container).width(), $(container).height());

我有一个使您的图像保持可见的示例： http : //codepen.io/anon/pen/XmKNXG

但是，还有另一个问题，即容器的高度不断增加。 我不知道为什么。