导语:在实现复杂动画或复杂图表的时候,css 往往不能或难以简洁方便的实现;而 canvas 给了你一张白纸和多彩的画笔,给与你无限的想象空间。
和尚今天绘制一个简单的 收入-支出 进度对比图;大致效果是在两个梯形中进行简单的内容展示;为了提高可复用性,和尚预先设定如下规则;
第六步:用for循环绘制表格。 问题?怎么绘制? 第一步:每一次的循环都开启一个新的路径。根据xy坐标绘制就行了.(默认canvas左上角开始). 为什么-0.5,因为默认情况下线条的中心点和像素的底部对齐所以会2显示,所以显示非纯黑...
第六步:用for循环绘制表格。 问题?怎么绘制? 第一步:每一次的循环都开启一个新的路径。根据xy坐标绘制就行了.(默认canvas左上角开始). 为什么-0.5,因为默认情况下线条的中心点和像素的底部对齐所以会2显示,所以显示非纯黑...
第一步:先画一个点moveTo。 第二步:再画另一个点lineTo。 第三步:再想另一个点的宽度如何。 第四步:再想想连起来的时候的颜色如何。