[canvas] canvas 绘制table和画线

david2tdw commented 4 years ago

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas table</title>
  </head>
  <body>
    <div id="container">
      <canvas id="cavsElem">
        你的浏览器不支持canvas，请升级浏览器
      </canvas>
    </div>
  </body>
</html>
<script>
  ;(function () {
    var data = [
      { nickName: '咸蛋的蛋', corpusBanker: 0, corpusPlayer: 0, corpusTie: 0, corpusBP: 0, corpusPP: 3138 },
      {
        nickName: '空有我葬',
        corpusBanker: 42200,
        corpusPlayer: 2000000000113,
        corpusTie: 0,
        corpusBP: 0,
        corpusPP: 0,
      },
      { nickName: '白字清欢', corpusBanker: 17700, corpusPlayer: 0, corpusTie: 0, corpusBP: 0, corpusPP: 0 },
      { nickName: '野风吹', corpusBanker: 0, corpusPlayer: 44500, corpusTie: 0, corpusBP: 0, corpusPP: 0 },
      { nickName: '在一起不分开', corpusBanker: 0, corpusPlayer: 5400, corpusTie: 0, corpusBP: 0, corpusPP: 0 },
      { nickName: '迎风偷吻你', corpusBanker: 0, corpusPlayer: 39600, corpusTie: 0, corpusBP: 0, corpusPP: 0 },
      { nickName: '让我认识你', corpusBanker: 7700, corpusPlayer: 0, corpusTie: 0, corpusBP: 0, corpusPP: 0 },
      { nickName: '荒废诗书', corpusBanker: 0, corpusPlayer: 37838, corpusTie: 0, corpusBP: 0, corpusPP: 0 },
      { nickName: '还是当年颜色', corpusBanker: 0, corpusPlayer: 48688, corpusTie: 0, corpusBP: 0, corpusPP: 0 },
      { nickName: '百般流传', corpusBanker: 0, corpusPlayer: 16400, corpusTie: 0, corpusBP: 0, corpusPP: 0 },
      { nickName: '对眼错过', corpusBanker: 0, corpusPlayer: 22388, corpusTie: 0, corpusBP: 0, corpusPP: 0 },
      { nickName: '别闹了', corpusBanker: 46400, corpusPlayer: 0, corpusTie: 0, corpusBP: 0, corpusPP: 0 },
    ]

    var summaryInfo = [
      {
        betNum: 32,
        corpusAmount: 587466,
        corpusBP: 8600,
        corpusBanker: 455366,
        corpusPP: 4200,
        corpusPlayer: 114900,
        corpusTie: 4400,
        gameNo: 15,
        resultAmount: 0,
        shoeNo: 14,
        tableID: 1,
      },
    ]

    var canvas = document.querySelector('#cavsElem')
    var ctx = canvas.getContext('2d')
    canvas.width = 455 * 2
    canvas.height = data.length * 40 + 80

    canvas.style.border = '1px solid #ccc'

    var rectH = 20
    var heightCenter = 10
    var rectW = 65
    var widthCenter = 35
    ctx.scale(2, 2)
    ctx.lineWidth = 1
    ctx.strokeStyle = '#ccc'
    ctx.textAlign = 'center'

    ctx.fillStyle = '#000000'
    ctx.fillText('序号', 32, 15) // context.fillText(text,x,y,maxWidth);
    ctx.fillText('用户', 97, 15)
    ctx.fillStyle = '#ff0000'
    ctx.fillText('红球', 162, 15)
    ctx.fillStyle = '#006fff'
    ctx.fillText('黄球', 227, 15)
    ctx.fillStyle = '#07c160'
    ctx.fillText('蓝球', 292, 15)
    ctx.fillStyle = '#ff0000'
    ctx.fillText('绿球', 357, 15)
    ctx.fillStyle = '#006fff'
    ctx.fillText('特殊号码', 422, 15)

    for (let i = 0; i < data.length; i++) {
      ctx.fillStyle = '#000000'
      ctx.fillText(i + 1, 32, rectH * i + widthCenter)
      ctx.fillText(data[i].nickName, 97, rectH * i + widthCenter)
      ctx.fillStyle = '#ff0000'
      ctx.fillText(data[i].corpusBanker, 162, rectH * i + widthCenter)
      ctx.fillStyle = '#006fff'
      // ctx.fillText(data[i].corpusPlayer, 227, rectH * i + widthCenter)
      ctx.fillText(data[i].corpusPlayer, 227, rectH * i + widthCenter, 1000)
      ctx.fillStyle = '#07c160'
      ctx.fillText(data[i].corpusTie, 292, rectH * i + widthCenter)
      ctx.fillStyle = '#ff0000'
      ctx.fillText(data[i].corpusBP, 357, rectH * i + widthCenter)
      ctx.fillStyle = '#006fff'
      ctx.fillText(data[i].corpusPP, 422, rectH * i + widthCenter)
    }
    ctx.fillStyle = '#000000'
    ctx.fillText('合计', 32, data.length * rectH + 35)
    ctx.fillText('', 97, data.length * rectH + 35)
    ctx.fillStyle = '#ff0000'
    ctx.fillText(summaryInfo[0].corpusBanker, 162, data.length * rectH + widthCenter)
    ctx.fillStyle = '#006fff'
    ctx.fillText(summaryInfo[0].corpusPlayer, 227, data.length * rectH + widthCenter)
    ctx.fillStyle = '#07c160'
    ctx.fillText(summaryInfo[0].corpusTie, 292, data.length * rectH + widthCenter)
    ctx.fillStyle = '#ff0000'
    ctx.fillText(summaryInfo[0].corpusBP, 357, data.length * rectH + widthCenter)
    ctx.fillStyle = '#006fff'
    ctx.fillText(summaryInfo[0].corpusPP, 422, data.length * rectH + widthCenter)

    for (let i = 0; i < data.length + 2; i++) {
      ctx.beginPath()
      ctx.moveTo(rectW * i, 0)
      ctx.lineTo(rectW * i, canvas.height)

      ctx.moveTo(0, rectH * i)
      ctx.lineTo(canvas.width, rectH * i)

      ctx.stroke()
    }
    ctx.beginPath() // 重新生命ctx属性，未声明的会延续之前设置的属性
    ctx.lineWidth = 2
    ctx.strokeStyle = 'rgba(192, 80, 77, 0.4)' // 需要带引号
    ctx.lineCap = 'round'
    ctx.lineJoin = 'round'
    ctx.moveTo(rectW * 3 + widthCenter, rectH * 2 + heightCenter)
    ctx.lineTo(rectW * 6 + widthCenter, rectH * 3 + heightCenter)
    ctx.lineTo(rectW * 4 + widthCenter, rectH * 4 + heightCenter)

    ctx.stroke() // 开始绘制

    ctx.beginPath()
    ctx.strokeStyle = 'green' // strokeStyle是基于context的全局配置，在使用beginPath()后，可重新设置context的属性
    ctx.lineCap = 'square'
    ctx.moveTo(rectW * 2 + widthCenter, rectH * 6 + heightCenter)
    ctx.lineTo(rectW * 6 + widthCenter, rectH * 7 + heightCenter)
    ctx.lineTo(rectW * 3 + widthCenter, rectH * 8 + heightCenter)

    ctx.stroke()
  })()
</script>

david2tdw commented 4 years ago

文字内容超出，自动换行的办法：

ctx.measureText()方法返回一个对象，该对象包含以像素计的指定字体宽度。

具体参见： canvas文本绘制自动换行、字间距、竖排等实现

david2tdw commented 4 years ago

文字内容超出，也可以通过缩放文字来解决：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JS Bin</title>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
  </body>
</html>
<script>
  var canvas = document.getElementById('myCanvas')
  var canvasWidth = canvas.width
  var context = canvas.getContext('2d')

  var x = 0
  var y = 400
  var text = 'Hello World1234222222222'

  context.font = '500px 微软雅黑'

  var textWidth = context.measureText(text).width
  if (textWidth > canvasWidth) {
    var scaled = canvasWidth / textWidth
    context.scale(scaled, scaled)
  }
  //x,y用于居中，文字起始点，和对齐有关。
  context.fillText(text, x, y)
</script>

canvas上文字怎么自动大小

david2tdw commented 4 years ago

绘制图片的x,y坐标是从图片的左上角开始计算位置的。 context.fillText(text, x, y) 绘制文字的x,y坐标是从文字的右下角开始计算位置的。

david2tdw / blog

[canvas] canvas 绘制table和画线 #179