设置canvas元素的尺寸

Question

我有一个画布，我链接到JSchart。我希望通过JQuery将画布高度和宽度设置为动态。

HTML

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

JS

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

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

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

Answer 1

您正在设置width的CSS height和canvas属性，这会导致其展开其内容。请参阅jQuery documentation：

尝试设置元素的width和height属性，如下所示：

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