在项目中需要用到canvas画图完成图表绘制,遇到一个问题canvas底部总是存在一定的间距。
html代码如下:
<div class="row">
<select ng-model="$ctrl.selected" class="time-unit text-center" ng-options="x.value as x.text for x in $ctrl.timeUnit">
</select>
<div id="time-line-container">
<canvas id="time-line-convas" width="1300" height="25" style="background: red; display: block;">
your browser not support canvas, please upgrade your browser.
</canvas>
</div>
</div>
最终显示出的界面如下:
即红色部分为canvas部分,无论如何调整canvas的margin和外层div容器的padding都不能消除空白部分。
Google一番在canvas的父div增加 vertical-align: bottom样式即可解决问题。
修复后的代码如下:
<div class="row">
<select ng-model="$ctrl.selected" class="time-unit text-center" ng-options="x.value as x.text for x in $ctrl.timeUnit">
</select>
<div id="time-line-container" style="vertical-align: bottom;">
<canvas id="time-line-convas" width="1300" height="25" style="background: red; display: block;">
your browser not support canvas, please upgrade your browser.
</canvas>
</div>
</div>
修复后刷新如下: