jquery - 设置 Canvas 元素的尺寸

Question

我有一个链接到 JSchart 的 Canvas .我希望通过 JQuery 动态设置 Canvas 高度和宽度。

HTML

<canvas id="keyFiguresChart"></canvas>

JS

this.drawChart();
this.$("#keyFiguresChart").width(800);
this.$("#keyFiguresChart").height(200);

当我在创建图表之前设置属性高度和宽度时，它不起作用。然后由 JSchart 库计算标准高度和宽度。

在创建图表后设置高度和宽度时，canvas 的尺寸是正确的，但内容被拉伸(stretch)以匹配尺寸。

Answer 1

您正在设置 canvas 的 CSS width 和 height 属性，这会导致它拉伸(stretch)其内容。请参见 jQuery documentation :

尝试像这样设置元素的 width 和 height 属性:

// Assuming you've only got one Canvas on page.
this.$("#keyFiguresChart").attr('width', 800);
this.$("#keyFiguresChart").attr('height', 200);