JSFiddle - React, Tailwind, and code Playground

by zhangchi

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #spread-container {
            border: 1px solid black;
            width: 800px;
            height: 600px;
        }
    </style>
</head>

<body>
    <div id="spread-container">
        <canvas id="spread" width="800" height="600"></canvas>
    </div>
    <script>
        //构建模型
        function buildModel() {
            let model = {
                cellStyle: {
                    width: 100,
                    height: 30,
                    font: '20px Georgia'
                }
            };
            model.rows = [];
            let rowLen = 200;
            let colLen = 30;
            for (let i = 0; i < rowLen; i++) {
                let row = []
                for (let j = 0; j < colLen; j++) {
                    row.push(`${i}行${j}列`);
                }
                model.rows.push(row)
            }
            return model;
        }

        //绘制表格
        function paintSheet(model) {
            let viewPortX = 0;
            let viewPortY = 0;
            let theCanvas = {
                width: 800,
                height: 600
            }
            let c = document.getElementById('spread')
            let ctx = c.getContext('2d');
            let fontSize = Number(/(\d+)px/.exec(model.cellStyle.font)[1]);
            ctx.font = model.cellStyle.font;

            //获取显示表格
            let getVisiableRows = function () {
                let startRowIndex = Math.round(viewPortY / 30);
                let endRowIndex = Math.round((viewPortY + theCanvas.width) / 30);
                let startColumnIndex = Math.round(viewPortX / 30);
                let endColumnIndex = Math.round((viewPortX + theCanvas.height) / 30);
                let visiableRows = model.rows.slice(startRowIndex, endRowIndex);
                visiableRows =...