小程序canvas绘制表格

前段时间接到一个项目，需要用canvas来绘制表格。看起来很复杂，其实重要的是要缕清思路，根据后台返回的数据，计算好x，y的距离。看图：
canvas：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_usage

17.png

1.wmxl里面 id：必须要有

<canvas  style="width: 100%; height:{{rectH}}px"  canvas-id="firstCanvas"></canvas>

2.js部分

//全局定义默认高度。
data:{
  rectH:500,
}

initCanvasTable() {
  const db = this.data.contentList.canvas; //定义后台数据
  const windowWidth = wx.getSystemInfoSync().windowWidth; // 屏幕的宽度
  this.setData({
    rectH:30 * db.length,//因表格高度UI说给30px，所以当获取了数据的总行数后，需要重新计算画布的高度。
  });
  //创建画布
  let ctx = wx.createCanvasContext('firstCanvas');

  //设置宽高
  let rectW = windowWidth - 30;
  let rectH = 30 * db.length;

//循环点
//开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法
ctx.beginPath()
for (var i = 1; i < db.length + 1; i++) {
  let _d = db;
    if (i > 1) {
      let _w = rectW * 0.4 - 5;
      let x = _w + _w / 10 * (_d[i - 1].score);
      let y = 30 * i - 30 / 2;
      ctx.setStrokeStyle = '#000',//设置线条颜色
      ctx.lineWidth = 1.5
      ctx.arc(x, y, 3, 0, 2 * Math.PI);//绘制圆形
    }
  }
  ctx.stroke()
}

需注意每次画线时ctx.beginPath()开始路径，画完都ctx.stroke() 都要闭合路径

画图啦，肯定是要计算各个高度，位置的。

创建好画布后，1、先画横线、竖线、中间的连折线、我举一个横线和中间竖线为例

//横线循环
ctx.beginPath()
for (var i = 1; i < db.length + 1; i++) {
let _d = db;
//把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条
ctx.moveTo(0, 30 * i);
if (i > 1) {
//到低分特征
  ctx.moveTo(0, 30 * i);
  ctx.lineTo(rectW * 0.4, 30 * i);

  //从高分者特征
  ctx.moveTo(rectW * 0.8, 30 * i);
  ctx.lineTo(rectW * 1, 30 * i);

  ctx.setTextAlign('center'),//设置文字对齐 
  ctx.setFontSize(8),//修改文字大小
  ctx.fillText(_d[i - 1].name, rectW * 0.1, 30 * i - 12);//填充文字
  ctx.fillText(_d[i - 1].low, rectW * 0.3, 30 * i - 12);
  ctx.fillText(_d[i - 1].high, rectW * 0.9, 30 * i - 12);
} else {
  //增加一个新点，然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条
  ctx.lineTo(rectW, 30 * i);
}
ctx.strokeStyle = '#000'
ctx.lineWidth = 1
}
ctx.stroke()

//中间竖线
ctx.beginPath()
for (var i = 1; i < db.length + 1; i++) {
  let _d = db;
  //把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条
  ctx.moveTo(0, 30 * i);
  if (i > 1) {
    //中间横线
    ctx.moveTo(rectW * 0.4, 30 * i - 15);
    ctx.lineTo(rectW * 0.8, 30 * i - 15);
    ctx.strokeStyle = '#999'
  }
  ctx.lineWidth = 1
}
ctx.stroke()

绘制结束后 一定要记得

//画出当前路径的边框。默认颜色色为黑色。
ctx.stroke()
//将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中
ctx.draw();
//闭合路径
ctx.closePath();

后来这种图片,就是我们后台直接生成图片了。开始听到这个消息，还是很震惊。（因为他们说生成不了，当我画完之后。他们告诉我说说可以生成。。。生气.jpng）但也还是重新温习了一个canvas，还是很值得的。