canvas制作简单表格

初识canvas，绘制简单表格

目的，制作一个可以点击的表格

想法： 以每一个小盒子按一定大小排列组成表格，格子的线段采用从顶到底、从左到右的方式绘制整个表格的格子，点击事件以点击时的offsetXY在json中找到对应的值显示（暂时不知道这样写正不正确）

json数据

var data = [
    {
        name: "改动",
        number1: 53,
        number2: 35,
        number3: 753,
        number4: 35,
        number5: 3138
    }, {
        name: "好地方",
        number1: 4,
        number2: 35,
        number3: 35,
        number4: 38,
        number5: 3540
    }, {
        name: "和人",
        number1: 10,
        number2: 8,
        number3: 52,
        number4: 35,
        number5: 7
    }...后边就不写了
];
var dataHeader = ['姓名', '数字1', '数字2', '数字3', '数字4', '数字5'];

html

<div id="container" style="position: relative;">
    <canvas id="canvas"></canvas>
    <div id="div" style="position: absolute; top: 10px;"></div>
</div>

script

var div = document.querySelector('#div');
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var boxW = 100, boxH = 50;
canvas.width = 600;
canvas.height = (data.length + 1) * 50;
canvas.style.border = '1px solid #222';

setCanvas()

function setCanvas() {

    // 设置文字格式
    context.textAlign = 'center';
    context.textBaseline = 'middle';

    // 画出头部信息
    context.font = "16px Arial";
    dataHeader.forEach((item, i) => {
        context.strokeStyle = '#ffff00';
        context.fillText(item, boxW * i + boxW / 2, boxH / 2);
    })

    // 画出tbody信息
    context.font = "14px Arial";
    data.forEach((item, index) => {
        Object.keys(item).forEach((d, i) => {
            context.strokeStyle = '#ff0000';
            context.fillText(item[d], boxW * i + boxW / 2, boxH * index + boxH + boxH / 2);
            context.strokeStyle = "#222";
            // 画出竖边框
            context.moveTo(i * boxW, 0);
            context.lineTo(i * boxW, boxH * (data.length + 1));
            context.stroke();
        })
        // 画出最后一个竖边框 ->最右侧的
        context.moveTo(Object.keys(item).length * boxW, 0);
        context.lineTo(Object.keys(item).length * boxW, boxH * (data.length + 1));
        context.stroke();
    })
    // 画出横边框
    for (let i = 0; i < data.length + 2; i++) {
        context.moveTo(0, i * boxH);
        context.lineTo(canvas.width, i * boxH);
        context.stroke();
    }
}
var lastX,lastY; // 还原方式重绘存储上次点击事件信息
// 绑定点击事件
canvas.addEventListener('click', function (evt) {
    let x = Math.floor(evt.offsetX / boxW); // 获取点击的位置，转换成按钮的 X索引
    let y = Math.floor(evt.offsetY / boxH); // 获取点击的位置，转换成按钮的 Y索引
    /**
    * // 全部重绘逻辑
    * // context.clearRect(0, 0, 999, 999); // 清楚canvas，重绘
    * // setCanvas(); // 重绘
    * // 全部重绘逻辑结束
    */
    // 还原的方式重绘逻辑 减少内存消耗
    // （每次只删除添加的边框，并不删除重绘整个canvas）
    if (lastX >= 0 && lastY >= 0) {
        let newX = boxW * lastX;
        let newY = boxH * lastY;
        context.clearRect(newX + 1, newY + 1, 1, boxH - 2);
        context.clearRect(newX + 1, newY + 1, boxW - 2, 1);
        context.clearRect(newX + boxW - 2, newY + 1, 1, boxH - 2);
        context.clearRect(newX + 1, newY + boxH - 2, boxW - 2, 1);
    }
    lastX = x;
    lastY = y;
    // 重绘逻辑结束

    context.strokeRect(boxW * x + 1, boxH * y + 1, boxW - 2, boxH - 2) // 绘制点击的边框

    data.forEach((item, index) => { // 循环获取data对象中点击的数据
        if (index === y - 1) {
            item && Object.keys(item).forEach((itemData, i) => {
                if (i === x) {
                    div.style.left = boxW * dataHeader.length + 20 + 'px';
                    div.innerHTML = item[itemData];
                }
            })
        }
    })
})