uniapp canvas画个表格
时间: 2023-08-02 17:38:30 浏览: 130
好的,以下是一个简单的uniapp canvas画表格的示例代码:
```html
<template>
<view class="canvas-container">
<canvas canvas-id="myCanvas" class="canvas"></canvas>
</view>
</template>
<script>
export default {
onReady() {
const context = uni.createCanvasContext('myCanvas', this);
const width = uni.upx2px(300); // 表格宽度
const height = uni.upx2px(200); // 表格高度
const padding = uni.upx2px(10); // 表格与画布边缘的距离
const rowHeight = uni.upx2px(30); // 行高
const colWidth = uni.upx2px(80); // 列宽
const rowCount = 4; // 行数
const colCount = 3; // 列数
// 绘制表格边框
context.strokeRect(padding, padding, width, height);
// 绘制表格行
for(let i = 1; i < rowCount; i++) {
context.beginPath();
context.moveTo(padding, padding + rowHeight * i);
context.lineTo(padding + width, padding + rowHeight * i);
context.stroke();
}
// 绘制表格列
for(let i = 1; i < colCount; i++) {
context.beginPath();
context.moveTo(padding + colWidth * i, padding);
context.lineTo(padding + colWidth * i, padding + height);
context.stroke();
}
// 填充表格内容
const data = [
['姓名', '年龄', '性别'],
['张三', '18', '男'],
['李四', '20', '女'],
['王五', '22', '男']
];
context.font = '14px sans-serif';
context.textAlign = 'center';
context.textBaseline = 'middle';
for(let i = 0; i < rowCount; i++) {
for(let j = 0; j < colCount; j++) {
context.fillText(data[i][j], padding + colWidth * (j + 0.5), padding + rowHeight * (i + 0.5));
}
}
context.draw();
}
}
</script>
<style>
.canvas-container {
width: 300upx;
height: 200upx;
}
.canvas {
width: 100%;
height: 100%;
}
</style>
```
这段代码绘制了一个4行3列的表格,表格宽度为300upx,高度为200upx。你可以根据实际需要进行调整。