Question

所以我是jQuery的新手，我一直在查看API，我们可以通过使用resize（）事件处理程序来调整元素大小，获取特定元素的parent（）div并使用attr设置属性（方法。

我已经尝试了以下代码，当我输出到控制台时，一切似乎都符合预期（宽度根据画布元素的父级而变化）。但是当我调整窗口大小时，画布消失了：

$(window).resize(function() {
  var width = $('#line_chart_price').parent().width();
  $('#line_chart_price').attr('width', width);
});

我在这里做错了什么？

非常感谢

Answer 1

您需要在调整大小时重绘画布上下文。

<强> JS

var can = document.querySelector('canvas');
canCtx = can.getContext('2d');
canCtx.fillRect(50, 25, 50, 100); // a basic rect. you could set this to the width of the parent off the bat if you want.

$(window).resize(function () {
  width = $(can).parent().width();
  can.width = width;
  canCtx.fillRect(50, 25, width, 100);
});

jsbin

Answer 2

我创建了一个示例，该示例反映了画布根据父元素的尺寸的响应性。

function outputsize() {
  console.log(textbox.clientWidth)
 myCanvas.width = textbox.clientWidth;
}
outputsize()

new ResizeObserver(outputsize).observe(textbox);

有关HTML结构，请参阅随附的bin。 JSBIN

如何根据div父宽度使画布响应

2 个答案: