我正在尝试创建一个具有背景图像的响应式 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();
});
最佳答案
看起来您可能需要在调整窗口大小时重新绘制图像。
ct.drawImage(background, 0, 0, $(container).width(), $(container).height());
我有一个例子可以让你的图像保持可见: http://codepen.io/anon/pen/XmKNXG
但是,还有一个问题就是容器高度不断增加。我不确定为什么。
关于javascript - 响应式 jQuery Canvas , Canvas 背景在窗口调整大小时消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32685426/