效果：
像这种简单的表格完全可以实现，这里只当入门canvas示例观看即可
代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Canvas绘制表格</title><style>body {padding: 0;margin: 0;}canvas {display: block;margin: 200px auto;}</style></head><body><canvas id="solar" width="800" height="400"></canvas><script>var width = document.querySelector("#solar").widthvar height = document.querySelector("#solar").heightvar HEADER = this.height * 0.1 // 表格头部高度，划分前先减去头部高度var BODY = this.height - this.HEADERvar MINWIDTH = this.width/24// 横坐标间隔段，划分为24格var RECT_WIDTH = this.width*0.097 // 色块宽度var RECT_HEIGHT = this.height*0.065 // 色块长度var TWELVE_HEIGHT = BODY/12 // 供给高度划分为12格var RECT_MARGIN_LEFT = this.width*0.0349init()function init(){let canvas = document.querySelector("#solar")let ctx = canvas.getContext("2d")this.width = canvas.widththis.height = canvas.heightthis.clear(ctx)this.drawTable(ctx)this.drawStatus(ctx)}// 清画布function clear(ctx){ctx.clearRect(0, 0, this.width, this.height)}// 绘制底层表格function drawTable(ctx) {console.log(this.width,' ',this.height)ctx.lineWidth = 2;ctx.strokeStyle = "#C8CDD5";ctx.textAlign = "center";let width = this.widthlet height = this.heightlet head = ctx.strokeRect(0,0, width,height)// 绘制表格头ctx.fillStyle="#E9EBF0"ctx.fillRect(0,0, width,HEADER)// 绘制表格头文字ctx.font = "22px MicrosoftYaHei-Bold"ctx.fillStyle = "#2E3B4C"ctx.textAlign = "center"ctx.fillText("实际", width/8, height*0.07)ctx.fillText("供给", width/8*3, height*0.07)ctx.fillText("车位", width/8*5, height*0.07)ctx.fillText("货品", width/8*7, height*0.07)// 绘制表格体文字ctx.font = "22px MicrosoftYaHei"ctx.fillStyle = "#3D4D61"ctx.fillText("A侧", MINWIDTH, HEADER + BODY*0.11)ctx.fillText("B侧", MINWIDTH, HEADER + BODY*0.11*3)ctx.fillText("C侧", MINWIDTH, HEADER + BODY*0.11*5)ctx.fillText("D侧", MINWIDTH, HEADER + BODY*0.83)ctx.fillText("A侧", MINWIDTH*7, HEADER + BODY*0.11)ctx.fillText("B侧", MINWIDTH*7, HEADER + BODY*0.11*3)ctx.fillText("C侧", MINWIDTH*7, HEADER + BODY*0.11*5)ctx.fillText("D侧", MINWIDTH*7, HEADER + BODY*0.83)ctx.fillText("储位", MINWIDTH*13, HEADER + BODY*0.11)ctx.fillText("实物", MINWIDTH*13, HEADER + BODY*0.11*4)ctx.fillText("储位", MINWIDTH*13, HEADER + BODY*0.75)ctx.fillText("实物", MINWIDTH*13, HEADER + BODY*0.92)ctx.fillText("K侧", MINWIDTH*19, HEADER + BODY/12)ctx.fillText("M侧", MINWIDTH*19, HEADER + BODY/12*3)ctx.fillText("A侧", MINWIDTH*19, HEADER + BODY/12*5)ctx.fillText("B侧", MINWIDTH*19, HEADER + BODY/12*7)ctx.fillText("C侧", MINWIDTH*19, HEADER + BODY/12*9)ctx.fillText("D侧", MINWIDTH*19, HEADER + BODY/12*11)//竖线let colW1 = width * 0.08let colW2 = width * 0.17let tempW = 0for(let i=1;i<=7;i++){ctx.beginPath()if(i%2 === 0){//偶数加colW2tempW += colW2ctx.moveTo(tempW, HEADER)ctx.lineTo(tempW, height)ctx.stroke()}else {//奇数加colW1tempW += colW1ctx.moveTo(tempW, HEADER)ctx.lineTo(tempW, height)//ctx.setLineDash([4])ctx.stroke()} }// 横实线ctx.moveTo(0, height*0.69)ctx.lineTo(width, height*0.69);ctx.stroke();// 受入检收横线let H1 = height * 0.2let tempH1 = height*0.07for (let k = 1; k <= 2 ; k++) {ctx.beginPath()tempH1 += H1ctx.moveTo(0, tempH1);ctx.lineTo(width * 0.5, tempH1);//ctx.setLineDash([4])ctx.stroke()}// 在库横线ctx.beginPath()ctx.moveTo(width * 0.5, height*0.07+height * 0.2);ctx.lineTo(width * 0.75, height*0.07+height * 0.2);//ctx.setLineDash([4])ctx.stroke()ctx.moveTo(width * 0.5, height*0.84);ctx.lineTo(width * 0.75, height*0.84);//ctx.setLineDash([4])ctx.stroke()// 供给横线let H2 = height * 0.153let tempH2 = height*0.07for (let k = 1; k <= 5 ; k++) {if(k=== 4) {tempH2 += H2} else {tempH2 += H2ctx.moveTo(width * 0.75, tempH2);ctx.lineTo(width, tempH2);//ctx.setLineDash([4])ctx.stroke()}}}function drawStatus(ctx) {//第一竖列this.fillRoundRect(ctx, MINWIDTH*2+RECT_MARGIN_LEFT, HEADER*1.5, RECT_WIDTH, RECT_HEIGHT, 4, '#67b662');this.fillRoundRect(ctx, MINWIDTH*2+RECT_MARGIN_LEFT, HEADER*3.5, RECT_WIDTH, RECT_HEIGHT, 4, '#67b662');this.fillRoundRect(ctx, MINWIDTH*2+RECT_MARGIN_LEFT, HEADER*5.5, RECT_WIDTH, RECT_HEIGHT, 4, '#E03523');//第二竖列this.fillRoundRect(ctx, MINWIDTH*8+RECT_MARGIN_LEFT, HEADER*1.5, RECT_WIDTH, RECT_HEIGHT, 4, '#E03523');this.fillRoundRect(ctx, MINWIDTH*8+RECT_MARGIN_LEFT, HEADER*3.5, RECT_WIDTH, RECT_HEIGHT, 4, '#67b662');this.fillRoundRect(ctx, MINWIDTH*8+RECT_MARGIN_LEFT, HEADER*5.5, RECT_WIDTH, RECT_HEIGHT, 4, '#67b662');}//==========================================其他方法=======================================/**该方法用来绘制一个有填充色的圆角矩形 *@param cxt:canvas的上下文环境 *@param x:左上角x轴坐标 *@param y:左上角y轴坐标 *@param width:矩形的宽度 *@param height:矩形的高度 *@param radius:圆的半径 *@param fillColor:填充颜色 **/function fillRoundRect(cxt, x, y, width, height, radius, fillColor) {//圆的直径必然要小于矩形的宽高if (2 * radius > width || 2 * radius > height) {return false; }cxt.save();cxt.translate(x, y);//绘制圆角矩形的各个边 this.drawRoundRectPath(cxt, width, height, radius);cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值 cxt.fill();cxt.restore();}function drawRoundRectPath(cxt, width, height, radius) {cxt.beginPath(0);//从右下角顺时针绘制，弧度从0到1/2PI cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);//矩形下边线 cxt.lineTo(radius, height);//左下角圆弧，弧度从1/2PI到PI cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);//矩形左边线 cxt.lineTo(0, radius);//左上角圆弧，弧度从PI到3/2PI cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);//上边线 cxt.lineTo(width - radius, 0);//右上角圆弧 cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);//右边线 cxt.lineTo(width, height - radius);cxt.closePath();}</script></body></html>
![[2024年]我的新伙伴700字左右](https://700zi.400zi.cn/uploadfile/img/2024/05/27/491e93cbce6fcb5ff02d42fc921785ea.jpg)
![[2024年]探寻张孝祥诗意之美：宋词鉴赏与深度解读](https://700zi.400zi.cn/uploadfile/img/2024/05/27/8850b384962229189271533b3974c63a.jpg)
