canvas画柱状图

需求

有个下图所示的需求，使用highcharts有点大材小用，而且也没特别合适的，heightcharts的柱状图都比较复杂。

bar.png

简单介绍两种方式实现：

• div + css3
  优点：实现简单
  缺点：需要多个dom元素
• canvas
  优点：dom元素少
  缺点：调试不方便

本文主要介绍下如何使用canvas绘制柱状图。

源码

戳我看源码

绘制静态图形

在做一件复杂的事情时，可以将其拆分为几个小的步骤。这里我们实际要做的就是以下几件事：

• 获取canvas元素，内容上下文

      let canvas = document.getElementById(id);
      let ctx = canvas.getContext('2d');
  

• 循环数组，得到每项的数据对象{name,color,percent}
• 绘制文字
  • 设置字体
    ctx.font = '12px Helvetica Neue,Helvetica,Arial,sans-serif';
  • 绘制字体

      ctx.fillStyle = '#333';
      ctx.fillText(item.name, siteX, siteY);
    

• 绘制矩形

     ctx.fillStyle = item.color;
     ctx.fillRect(siteX, siteY + titleSpace, item.lastWidth, rectH);
  

• 绘制百分比
• 增加间距，设置下一次的绘图位置

动画

增加点动画体验更好。实质是在画布上绘制多次，之后清空画布，只保留最后一次的绘制结果。
思路：

• 使用requestAnimationFrame()进行重绘
• 清空画布
• 设置上一次宽度
• 匀减速
• 绘制
• 判断边界值

高倍屏下模糊处理

需要注意的是，在retina屏幕上，canvas会模糊。

原因：

实际在于屏幕的设备像素比不同，除了canvas，普通图片也会变模糊。
假设devicePixelRatio=2，那么浏览器就会以2个像素点来渲染一个像素，相当于被拉伸了。

解决办法：

1. 获取屏幕的设备像素比let ratio = window.devicePixelRatio || 1;

2. 将canvas的画布宽高*ratio，而样式宽高为一倍。即先放大再缩小。

 // 设置canvas的样式宽高
 canvas.style.width = canvas.width + 'px';
 canvas.style.height = canvas.height + 'px';
// canvas的宽高
 canvas.width = canvas.width * ratio;
 canvas.height = canvas.height * ratio;

canvas的宽高区别

• 自身宽高：实际画布大小
• 样式设置的宽高：实际显示的大小

3. canvas中的线条大小、文字大小等都需要乘以该倍率来进行绘制

• 涉及到宽高，位置的变量都有*ratio
• 按照一倍值绘制，使用scale()将context放大

推荐使用ctx.scale(ratio,ratio)。因为数值较多的时候，每个都*ratio比较繁琐，容易遗漏。

参考

canvas在高倍屏下变模糊的处理方法
High DPI Canvas(高分辨率canvas)