画布元素的设置尺寸

Question

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

HTML

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

JS

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

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

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

Answer 1

您正在设置导致其拉伸其内容的canvas的CSS width和height属性。见jQuery的documentation：

尝试设置元素的width和height属性是这样的：

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