canvas 簡單的實現柱狀圖

時間 2019-11-12

標籤 canvas 簡單實現柱狀简体版

原文原文鏈接

效果如何，先看下圖html

既然看到圖片的效果了，那麼下面咱們進行代碼分析ios

1.封裝一個函數來繪畫柱形條canvas

// 在 canvas 畫一個柱形條
function draw(opts) {
  // 得到 2d 上下文對象
  let ctx = opts.ctx
  let oPoint = opts.oPoint
  let lPoint = opts.lPoint
  ctx.beginPath();
  // 路徑的起始點座標
  ctx.moveTo(oPoint.x, oPoint.y);
  // 線條繪製的座標
  lPoint.forEach((val, idx) => {
    ctx.lineTo(val.x, val.y);
  });
  // 填充的顏色
  ctx.fillStyle = opts.fillStyle;
  ctx.closePath();
  ctx.fill();
}

2.這裏的柱形條所用的顏色我經過下面這個隨機函數進行獲取axios

// 隨機產生十六進制顏色值
function randomColor() {
  let str = '#'
  for (let i = 0; i < 3; i++) {
    let num = parseInt(256 * Math.random());
    if (num.toString(16).length === 1) {
      str += '0' + num.toString(16)
    } else {
      str += num.toString(16)
    }
  }
  return str
}

3.接下來是 canvas 的核心代碼實現：瀏覽器

因爲這裏我設置的 canvas 的寬度是 400px
因此這裏限制產生的柱形條的多少就根據寬度進行匹配
間距爲 10px ，這裏是 i 的值dom

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
// 判斷是否支持 canvas
if (ctx) {
  // 隨機產生出寬度
  let w = parseInt(30 * Math.random()) + 10
  // 座標位置
  let i = 10;
  let k = 0;
  for (; i < 400 - w;) {
    // 隨機產生出高度
    let h = parseInt(320 * Math.random()) + 50
    draw({
      ctx,
      oPoint: { x: i, y: 400 },
      lPoint: [
        {
          x: i,      // 座標位置
          y: 400 - h // 畫布座標左上角是(0,0) 往下是 y 值, 往右是 x 值 
        },
        {
          x: i + w,
          y: 400 - h
        },
        {
          x: i + w,
          y: 400
        }
      ],
      fillStyle: randomColor()
    })
    // 間距加上寬度再加上上一個位置座標
    i += w + 10
    k++;
  }
} else {
  alert('瀏覽器不支持canvas');
}

分析完了，最後來一個完整的代碼展現函數

<!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">
  <title>canvas</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .chart {
      position: relative;
      margin: 50px;
    }

    .canvas {
      background: #e0e0e0;
    }

    .x-line,
    .y-line {
      position: absolute;
    }

    .x-line {
      left: -48px;
      width: 100px;
      box-sizing: border-box;
      bottom: 4px;
      height: 400px;
    }

    .y-line {
      left: -1px;
      display: flex;
      width: 400px;
      bottom: -96px;
    }

    .x-line-point {
      margin: 0 20px;
    }

    .x-line-point * {
      display: inline-block;
      vertical-align: top;
    }

    .x-line-point span {
      margin: -3px;
    }

    .x-axis {
      width: 1px;
      height: 100px;
      background: #333;
    }

    .y-axios-box {
      position: relative;
      width: 400px;
      height: 100px;
    }

    .y-axis {
      height: 1px;
      background: #333;
    }

    .top1,
    .top2,
    .top3,
    .top4 {
      position: absolute;
      width: 1px;
      background: #333;
      height: 6px;
      top: -6px;
    }

    .top1 {
      left: 99px;
    }

    .top2 {
      left: 198px;
    }

    .top3 {
      left: 297px;
    }

    .top4 {
      left: 396px;
    }

    .bottom1,
    .bottom2,
    .bottom3,
    .bottom4 {
      position: absolute;
      top: 0px;
    }

    .bottom1 {
      left: 86px;
    }

    .bottom2 {
      left: 186px;
    }

    .bottom3 {
      left: 286px;
    }

    .bottom4 {
      left: 386px;
    }
  </style>
</head>

<body>
  <div class="chart">
    <div class="x-line">
      <div class="x-line-point">
        <span>400</span>
        <i class="x-axis"></i>
        <span>-</span>
      </div>
      <div class="x-line-point">
        <span>300</span>
        <i class="x-axis"></i>
        <span>-</span>
      </div>
      <div class="x-line-point">
        <span>200</span>
        <i class="x-axis"></i>
        <span>-</span>
      </div>
      <div class="x-line-point">
        <span>100</span>
        <i class="x-axis"></i>
        <span>-</span>
      </div>
    </div>
    <canvas id="myCanvas" class="canvas" width="400" height="400"></canvas>
    <div class="y-line">
      <div class="y-axios-box">
        <span class="top1"></span>
        <span class="top2"></span>
        <span class="top3"></span>
        <span class="top4"></span>
        <p class="y-axis"></p>
        <span class="bottom1">100</span>
        <span class="bottom2">200</span>
        <span class="bottom3">300</span>
        <span class="bottom4">400</span>
      </div>
    </div>
  </div>

  <script>
    // 在 canvas 畫一個柱形條
    function draw(opts) {
      // 得到 2d 上下文對象
      let ctx = opts.ctx
      let oPoint = opts.oPoint
      let lPoint = opts.lPoint
      ctx.beginPath();
      // 路徑的起始點座標
      ctx.moveTo(oPoint.x, oPoint.y);
      // 線條繪製的座標
      lPoint.forEach((val, idx) => {
        ctx.lineTo(val.x, val.y);
      });
      // 填充的顏色
      ctx.fillStyle = opts.fillStyle;
      ctx.closePath();
      ctx.fill();
    }
    // 隨機產生十六進制顏色值
    function randomColor() {
      let str = '#'
      for (let i = 0; i < 3; i++) {
        let num = parseInt(256 * Math.random());
        if (num.toString(16).length === 1) {
          str += '0' + num.toString(16)
        } else {
          str += num.toString(16)
        }
      }
      return str
    }
    let canvas = document.getElementById('myCanvas');
    let ctx = canvas.getContext('2d');
    // 判斷是否支持 canvas
    if (ctx) {
      // 隨機產生出寬度
      let w = parseInt(30 * Math.random()) + 10
      // 座標位置
      let i = 10;
      let k = 0;
      for (; i < 400 - w;) {
        // 隨機產生出高度
        let h = parseInt(320 * Math.random()) + 50
        draw({
          ctx,
          oPoint: { x: i, y: 400 },
          lPoint: [
            {
              x: i,      // 座標位置
              y: 400 - h // 畫布座標左上角是(0,0) 往下是 y 值, 往右是 x 值 
            },
            {
              x: i + w,
              y: 400 - h
            },
            {
              x: i + w,
              y: 400
            }
          ],
          fillStyle: randomColor()
        })
        // 間距加上寬度再加上上一個位置座標
        i += w + 10
        k++;
      }
    } else {
      alert('瀏覽器不支持canvas');
    }
  </script>
</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。