前端特效源代码：实现柱状图入门必会 h5+canvs

前端特效源代码：实现柱状图 h5+canvs

- 效果展示
- 源代码
本代码是前端特效的入门必学案例！
效果展示

在这里插入图片描述
源代码


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style type="text/css">
      html,
      body {
        margin: 0;
        padding: 0;
      }
      main {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-color: #e0e3ed;
      }
      canvas {
        border-radius: 8px;
        box-shadow: 0 0 18px rgba(0, 0, 0, 0.2);
      }
    </style>
    <title>Canvs 实现柱状图</title>
  </head>
  <body onload="draw();">
    <main>
      <canvas width="600" height="300" id="bar-chart"></canvas>
    </main>

    <script type="text/javascript">
      // 月份
      const months = [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月"
      ];

      // function init() {
      //   window.requestAnimationFrame(draw);
      // }

      function draw() {
        var canvas = document.getElementById("bar-chart");
        var ctx = canvas.getContext("2d");

        // 获取canvas宽和高
        let cWidth = canvas.width;
        let cHeight = canvas.height;

        ctx.fillStyle = "#f8fcff";
        ctx.fillRect(0, 0, cWidth, cHeight);

        // 计算 9 个柱子的位置
        // canvas 内边距
        let padding = 40;

        // 柱子宽度
        let width = 8;

        // 柱子最大高度
        let maxHeight = (cHeight - 2 * padding) / 2;

        // 柱子最小高度
        let minHeight = maxHeight / 2;

        // 柱子间距
        let barGap = (cWidth - 2 * padding - 9 * width) / 8;

        // 柱子圆角
        let radius = 5;

        // y坐标起始于canvas中间
        let y = cHeight / 2;

        for (let i = 0; i < 9; i++) {
          // 柱子上半部分高度，随机产生[minHeight, maxHeight]区间的数字
          let height1 = Math.floor(
            Math.random() * (maxHeight - minHeight + 1) + minHeight
          );
          // 柱子下半部分高度，随机产生[minHeight, maxHeight]区间的数字
          let height2 = Math.floor(
            Math.random() * (maxHeight - minHeight + 1) + minHeight
          );

          // 计算每个柱子起始x坐标的位置
          let x = padding + (barGap + width) * i;
          // 画柱图
          drawBar(ctx, x, y, width, height1, height2, radius);

          // 画月份文字
          ctx.fillStyle = "#747D8C";
          ctx.textAlign = "center";

          // 设置字体粗细，大小，字体名
          ctx.font = "300 12px sans-serif";
          // 在柱体中间位置开始画文字
          ctx.fillText(months[i], x + width / 2, y + maxHeight + 20);
        }
      }

      // 画柱子
      function drawBar(ctx, x, y, width, height1, height2, radius) {
        ctx.beginPath();
        // 上半部分，四条边，两个圆角
        ctx.moveTo(x, y);
        ctx.lineTo(x, y - height1 + radius);
        ctx.arcTo(x, y - height1, x + radius, y - height1, radius);
        ctx.lineTo(x + width - radius, y - height1);
        ctx.arcTo(
          x + width,
          y - height1,
          x + width,
          y - height1 + radius,
          radius
        );
        ctx.lineTo(x + width, y);
        ctx.lineTo(x, y);
        ctx.fillStyle = "#341F97";
        ctx.fill();

        // 下半部分，四条边，两个圆角
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x, y + height2 - radius);
        ctx.arcTo(x, y + height2, x + radius, y + height2, radius);
        ctx.lineTo(x + width - radius, y + height2);
        ctx.arcTo(
          x + width,
          y + height2,
          x + width,
          y + height2 - radius,
          radius
        );
        ctx.lineTo(x + width, y);
        ctx.lineTo(x, y);
        ctx.fillStyle = "#54A0FF";
        ctx.fill();
      }
    </script>
  </body>
</html>
前端特效源代码：实现柱状图入门必会 h5+canvs

前端特效源代码：实现柱状图 h5+canvs

效果展示

源代码

猜你喜欢
