0

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

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

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

我在这里做错了什么？

非常感谢

4

2 回答 2

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

于 2013-07-29T13:56:33.260 回答
0

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

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

new ResizeObserver(outputsize).observe(textbox);

对于 HTML 结构，请参阅附加的 bin。 JSBIN

于 2019-10-04T09:50:04.133 回答