canvas画一个坐标轴柱状图

W_wx

已于 2023-05-25 13:39:53 修改

阅读量245

点赞数

于 2022-09-01 21:21:54 首次发布

本文链接：https://blog.csdn.net/szwwwx/article/details/126651589

版权

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }

    canvas {
      display: block;
    }
  </style>
</head>

<body>
  <canvas></canvas>
  <script>
    let canvas = document.querySelector('canvas')
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    let ctx = canvas.getContext('2d')
    let offset = 50//位移20px
    let gap = 30
    let width = 40
    let cross = 30
    // let color = "#" + Math.floor(0xffffff * Math.random()).toString(16)

    let w = 600
    let h = 500
    ctx.moveTo(offset, offset)//x向右移动20 y向下移动20 x坐标轴：20 y坐标轴：20
    ctx.lineTo(offset, h + cross+offset)

    ctx.moveTo(offset - cross, h+offset)
    ctx.lineTo(w+offset, h+offset)
    ctx.stroke()

    // ctx.fillRect(offset,offset,30,580)//x,y,width,heigth 宽度从（20,20）坐标轴开始向正下方向延伸
    // ctx.fillRect(offset + (width + gap) * 0 + gap, 600, width, -300)//设置坐标轴xy（offset：20,600）将其高度向负方向延伸
    // ctx.fillStyle ="#233333"
    // ctx.fillRect(offset + gap + width + gap, 600, width, -300)//设置坐标轴xy（offset：20,600）将其高度向负方向延伸
    // ctx.fillRect(offset + gap + width + gap + gap + width, 600, width, -300)//设置坐标轴xy（offset：20,600）将其高度向负方向延伸
    //offset+gap+width+gap+width+gap =offset+（gap+width）*2+gap

    // ctx.fillRect(offset + (width + gap) * 0 + gap, 600, width, -300)//设置坐标轴xy（offset：20,600）将其高度向负方向延伸
    // ctx.fillRect(offset + (width + gap) * 1 + gap, 600, width, -200)//设置坐标轴xy（offset：20,600）将其高度向负方向延伸
    // ctx.fillRect(offset + (width + gap) * 2 + gap, 600, width, -500)//设置坐标轴xy（offset：20,600）将其高度向负方向延伸
    // ctx.fillRect(offset + (width + gap) * 3 + gap, 600, width, -300)//设置坐标轴xy（offset：20,600）将其高度向负方向延伸
    // ctx.fillRect(offset + (width + gap) * 4 + gap, 600, width, -200)//设置坐标轴xy（offset：20,600）将其高度向负方向延伸
    // ctx.fillRect(offset + (width + gap) * 5 + gap, 600, width, -500)//设置坐标轴xy（offset：20,600）将其高度向负方向延伸
    let arr = [200, 400, 300, 300, 500, 400, 300,800];

    function getmaxNum(arr) {
      let max = Math.max(...arr)
      let num = Math.pow(10, max.toString.length - 1)//math.pow(a,b)a的b次方//max.tostring转换为字符串， max.toString.length - 1遍历字符串长度,字符串长度减1，-1
      let maxNum = Math.ceil(max / num) * num

      return maxNum
    }
    let maxNum = getmaxNum(arr)
    let ywidth = (w - gap) / arr.length - gap
    // let height2 =
    for (let i = 0; i < arr.length; i++) {
      let color = "#" + Math.floor(0xffffff * Math.random()).toString(16)
      ctx.fillStyle = color
      let height = (arr[i] / maxNum) * h
      // ctx.fillRect(offset + (width + gap) * i + gap, 600, ywidth, - height)//设置坐标轴xy（offset：20,600）将其高度向负方向延伸
      // ctx.fillRect(offset + (width + gap) * 1 + gap, 600, width, - height)//设置坐标轴xy（offset：20,600）将其高度向负方向延伸
      // ctx.fillRect(offset + (width + gap) * 2 + gap, 600, width, - height)//设置坐标轴xy（offset：20,600）将其高度向负方向延伸
      // ctx.fillRect(offset + (width + gap) * 3 + gap, 600, width, - height)//设置坐标轴xy（offset：20,600）将其高度向负方向延伸
      // ctx.fillRect(offset + (width + gap) * 4 + gap, 600, width, - height)//设置坐标轴xy（offset：20,600）将其高度向负方向延伸
      // ctx.fillRect(offset + (width + gap) * 5 + gap, 600, width, - height)//设置坐标轴xy（offset：20,600）将其高度向负方向延伸
      ctx.fillRect(offset + (width + gap) * i + gap, h - height+offset, ywidth, height)
    }


  </script>
</body>

</html>