uniapp 绘图
使用 Canvas 绘制图形
在 UniApp 中，可以通过 canvas 组件实现绘图功能。canvas 是一个画布组件，允许通过 JavaScript 进行图形绘制。
基本步骤：
- 在页面中添加
canvas组件：<canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas> - 在 JavaScript 中获取绘图上下文并绘制图形：
const ctx = uni.createCanvasContext('myCanvas'); ctx.setFillStyle('#ff0000'); ctx.fillRect(10, 10, 150, 75); ctx.draw();
支持的绘图操作：
- 绘制矩形：
fillRect,strokeRect - 绘制路径：
moveTo,lineTo,arc,quadraticCurveTo,bezierCurveTo - 设置样式：
setFillStyle,setStrokeStyle,setLineWidth - 文本绘制：
fillText,setFontSize
使用第三方图表库
如果需要绘制复杂的图表（如折线图、饼图等），可以使用第三方库如 ucharts 或 echarts 的 UniApp 版本。
以 uCharts 为例：
- 安装 uCharts：
npm install @qiun/ucharts - 在页面中引入并使用：
import uCharts from '@qiun/ucharts'; export default { onReady() { const chart = new uCharts({ canvasId: 'chartId', type: 'line', categories: ['Jan', 'Feb', 'Mar'], series: [{ data: [20, 40, 30] }], width: 300, height: 200 }); } };
绘制动态图形
可以通过结合 setInterval 或动画 API 实现动态绘图效果。
示例：动态绘制圆形
let radius = 0;
const ctx = uni.createCanvasContext('myCanvas');
function drawCircle() {
ctx.clearRect(0, 0, 300, 300);
ctx.beginPath();
ctx.arc(150, 150, radius, 0, 2 * Math.PI);
ctx.setFillStyle('#00ff00');
ctx.fill();
ctx.draw();
radius += 2;
if (radius <= 50) {
setTimeout(drawCircle, 100);
}
}
drawCircle();导出绘图结果
绘图完成后，可以将画布内容导出为图片文件。
导出为临时文件路径：
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
success(res) {
console.log(res.tempFilePath); // 图片临时路径
}
});注意事项
- 在 Vue 页面中，确保在
onReady生命周期后再操作画布。 - 小程序端部分绘图 API 与 Web 标准存在差异，需参考 UniApp 文档。
- 高频率绘制可能影响性能，建议使用
requestAnimationFrame优化动画。
