canvas 试用：ヽ(°▽°)ノ绘制一个表格并在表格中填充数据_android canve绘制表格,并编辑-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35621335/article/details/120909461

本文介绍了如何使用HTML和JavaScript在canvas上创建一个动态的表格，展示了各类数据（如总数量、类别分布）的可视化效果，便于快速理解和分析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

展示效果：

html代码：

        <canvas id="canvas" ></canvas>

js代码

注释什么的是根据自己的理解加的，因为第一次用，可能有不对的地方，欢迎指正

var data = [
          {zongshu:"158",yilei:"第一类：1229",erlei:"第二类：554",sanlei:"第三类：47"},
          {zongshu:"7848",yilei:"第一类：5312",erlei:"第二类：2457",sanlei:"第三类：79"}
  ];
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");;
  canvas.width = 340;
  canvas.height = 150;
  canvas.style.border="1px solid #ccc";
  var rectW=(canvas.width)/4;  //85 小格子的宽度，因为要一行显示4个，所以获得canvas的宽度/4即可
  var rectH=(canvas.height)/2;     //75  小格子的高度，因为要显示两行，所以所以获得canvas的高度/2即可

  for(var i= 0;i<4;i++){  // 绘制表格线
    //开始纵向线
    ctx.moveTo(rectW*i,0);   //  画线 开始位置，   x轴位置，y轴位置
    ctx.lineTo(rectW*i,canvas.height);   //  画线，结束位置     x轴位置，y轴位置
    // 结束纵向线
    //开始横向线
    ctx.moveTo(0,rectH*i);
    ctx.lineTo(canvas.width,rectH*i);
    //结束横向线
    ctx.stroke();  //stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色
  }

  for(var i = 0;i<data.length;i++){
    var zongshu = data[i].zongshu;
    var yilei = data[i].yilei;
    var erlei = data[i].erlei;
    var sanlei = data[i].sanlei;
    ctx.fillText(zongshu,40,i*rectW+30);  // 展示内容    内容，x轴开始位置，y轴开始位置
    ctx.fillText(yilei,100,i*rectW+30);   // 横向第二个格子的内容及位置
    ctx.fillText(erlei,180,i*rectW+30);   // 横向第三个格子的内容及位置
    ctx.fillText(sanlei,270,i*rectW+30);  // 横向第四个格子的内容及位置
  }