Canvas 绘制柱状图

html
<canvas width="800" height="420"></canvas>
css
*{
	margin: 0;
	padding: 0;
}

javascript
// 获取canvas
	let canvas = document.querySelector('canvas')
	// 获取上下文
	let ctx = canvas.getContext('2d')
	// 绘制文本
	ctx.font = '16px 微软雅黑'
	ctx.fillText('数据可视化——canvas柱状图',50,80)
	// 绘制线段
	ctx.moveTo(100,100)
	ctx.lineTo(100,400)
	ctx.lineTo(700,400)
	ctx.stroke()
	// 绘制Y轴
	ctx.moveTo(100,100)
	ctx.lineTo(700,100)
	// 左侧文字
	ctx.fillText('150',70,110)
	ctx.moveTo(100,160)
	ctx.lineTo(700,160)
	// 左侧文字
	ctx.fillText('120',70,170)
	ctx.moveTo(100,220)
	ctx.lineTo(700,220)
	// 左侧文字
	ctx.fillText('90',70,230)
	ctx.moveTo(100,280)
	ctx.lineTo(700,280)
	// 左侧文字
	ctx.fillText('60',70,290)
	ctx.moveTo(100,340)
	ctx.lineTo(700,340)
	// 左侧文字
	ctx.fillText('30',70,350)
	ctx.fillText('0',70,410)
	ctx.stroke()
	// 绘制X轴
	ctx.moveTo(250,400)
	ctx.lineTo(250,410)
	// 底部文字
	ctx.fillText('食品',170,415)
	ctx.moveTo(400,400)
	ctx.lineTo(400,410)
	// 底部文字
	ctx.fillText('数码',320,415)
	ctx.moveTo(550,400)
	ctx.lineTo(550,410)
	// 底部文字
	ctx.fillText('服饰',450,415)
	// 底部文字
	ctx.fillText('箱包',600,415)
	ctx.stroke()
	// 绘制矩形
	ctx.fillStyle = 'red'
	ctx.fillRect(120,200,100,200)
	ctx.fillStyle = 'red'
	ctx.fillRect(270,100,100,300)
	ctx.fillStyle = 'red'
	ctx.fillRect(420,150,100,250)
	ctx.fillStyle = 'red'
	ctx.fillRect(570,250,100,150)

效果如上图