使用canvas绘制柱形图

最新推荐文章于 2023-03-06 14:04:44 发布

吃喽喽

最新推荐文章于 2023-03-06 14:04:44 发布

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_47013351/article/details/124905257

本文通过实例代码介绍了如何使用HTML5的Canvas元素和JavaScript来绘制柱状图，包括绘制横纵坐标、水平轴和柱状图本身，是前端开发中数据可视化的基础操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)