使用canvas绘制柱形图

canvas 是 HTML5 新增的，一个可以使用JavaScript在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。

 

 

  let canvas = document.querySelector('canvas')
  ctx = canvas.getContext('2d')
  ctx.font = '16px 微软雅黑'
  ctx.fillText('canvas绘制柱形图', 50, 50)
  //绘制横纵坐标
  ctx.moveTo(100, 100)
  ctx.lineTo(100, 400)
  ctx.lineTo(700, 400)
  ctx.stroke()
  //绘制水平线
  ctx.moveTo(100, 100)
  ctx.lineTo(700, 100)
  ctx.fillText('150', 65, 110)

  ctx.moveTo(100, 160)
  ctx.lineTo(700, 160)
  ctx.fillText('120', 65, 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', 75, 400)
  ctx.stroke()
  //绘制水平轴底部线段
  ctx.moveTo(250, 400)
  ctx.lineTo(250, 410)
  //底部文字
  ctx.fillText('食品', 170, 415)
  ctx.moveTo(400, 400)
  ctx.lineTo(400, 410)
  //底部文字
  ctx.fillText('数码', 310, 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.fillRect(280, 140, 100, 260)
  ctx.fillRect(420, 190, 100, 210)
  ctx.fillRect(570, 260, 100, 140)