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

然而，容器高度不断增加还存在另一个问题。我不知道为什么。

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

1 个答案: