javascript - 响应式 jQuery Canvas ， Canvas 背景在窗口调整大小时消失

Question

我正在尝试创建一个具有背景图像的响应式 Canvas 。我创建了一个有问题的代码笔:http://codepen.io/eternalminerals/pen/avZBOr

我试图让这个 Canvas 响应，这意味着当我调整窗口大小时，背景中的图像也会调整大小，但当您调整窗口大小时图像完全消失。

任何帮助将不胜感激!代码笔有问题。谢谢。

这是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

但是，还有一个问题就是容器高度不断增加。我不确定为什么。