響應式jQuery畫布，畫布背景消失窗口調整大小

我想創建一個具有背景圖像的響應式畫布。我創建了一個有這樣的問題的codepen：http://codepen.io/eternalminerals/pen/avZBOr 響應式jQuery畫布，畫布背景消失窗口調整大小

我想使這個畫布響應，這意味着當我調整窗口大小時，背景中的圖像也調整大小，但是當您調整大小時，圖像完全消失窗口。

任何幫助，將不勝感激！該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(); 

});

來源

2015-09-20 eternalminerals.com

看起來你可能需要在窗口大小調整，重新繪製圖像。

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

我有，將讓你的形象仍然可見的例子： http://codepen.io/anon/pen/XmKNXG

但是，其中容器高度不斷增加的另一個問題。我不知道爲什麼。

來源

2015-09-21 00:04:07

非常感謝你，Hieu Le，我也看到了這個問題，但是這對我來說確實有很大幫助！將保持修補它 –

我認爲我解決了它：http://codepen.io/eternalminerals/pen/avZBOr我用$（窗口）。寬（）和$（窗口）.height（）而不是$（容器）.width（）/ height（） –

太棒了！祝你好運！ –

響應式jQuery畫布，畫布背景消失窗口調整大小

回答

相關問題