用canvas构建柱状图

一.什么是canvas？

        Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。

二.canvas的用途：

1.可视化数据：数据图表；

2.游戏：canvas 在基于 Web 的图像显示方面比 Flash 更加立体、精巧，canvas 游戏在流畅度和跨平台方面更牛；

3.其他可嵌入网站的内容(多用于活动页面、特效)：类似图表、音频、视频，还有许多元素能够更好地与 Web 融合，并且不需要任何插件。

三.canvas的使用：

html代码：

        <div style="margin-right: 50px;">
            <h3>总销量变化情况</h3>
            <canvas id="cav"  width="480" height="380"></canvas>
        </div>

canvas上大部分都是在操作路径，所以在绘制图形之前要开启路径
beginPath(): 开启路径

fill: 用于添加路径

font(): 改变文字样式

fillStyle: 改变填充颜色

moveTo()：绘制线段的起点　　参数  x,y  　坐标位置；

lineTo()：绘制线段的领点　　参数 x,y　　坐标位置 ；  （最后一个lineTo就代表终点）线条只能有一个moveTo()，但却可以有很多lineTo()

stroke()　　绘制线段；

js代码：

// canvas提供了rect()方法和fillRect()方法可以直接绘制一个矩形。
var cav = document.querySelector("#cav")
// getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
var ctx = cav.getContext("2d")
// moveTo(50,350)把路径移动到画布中的指定点，不创建线条。（x,y）开始坐标
ctx.moveTo(0, 290)
//lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条。	（x,y）结束坐标
ctx.lineTo(480, 290)
// stroke()	 绘制已定义的路径。（执行）	无
ctx.stroke()
//假数据
arr = [500, 600, 800, 700, 560, 710]
//设置最大高度
var maxh = 300 / Math.max(...arr)
for (let i = 0; i < arr.length; i++) {
    // beginPath() 	起始一条路径，或重置当前路径。 	无
    ctx.beginPath()
    // 语法：上下文对象点rect(x,y,width,height);x为左上角顶点的x轴坐标，y为左上角顶点的y轴坐标，width为矩形的宽度，height为矩形的高度；fillRect()方法内的四个参数也相同。区别在于fillRect()会自动矩形填充颜色，而rect()还需要上下文对象调用fill()。
    ctx.rect(80 + i * 60, 290 - maxh * arr[i], 30, maxh * arr[i])
    ctx.fillText("第" + (i + 1) + "季度", 80 + i * 60, 320);
    ctx.fillStyle = "blue"//柱体的颜色
    ctx.fill()//进行绘图填充
}

运行结果图：

需要注意的地方是我们的canvas元素尽量不要使用style的像素值来定义宽高，建议使用canvas标签的width和height参数（如果不给 canvas 设置 widht、height 属性时，则默认 width为300、height 为 150）

参考博主链接：学会用canvas构建折线图、柱状图、饼状图_M78_国产007的博客-优快云博客_canvas 画折线图