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

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

我已经尝试了下面的代码，当我输出到控制台时，一切都像预期的那样（宽度根据canvas元素的父元素而改变）。但当我调整窗口大小时，画布消失：

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

我做错了什么

---

非常感谢

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

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);
});

---

我创建了一个示例，根据父元素的维度反映画布的响应性

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

new ResizeObserver(outputsize).observe(textbox);

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

也许可以尝试更改$（'线条图\价格'）.attr（'宽度'，宽度）；至$（'线条图'价格'）.attr（'宽度'，$宽度）；或美元（折线图价格）。attr（'width'，+width）；