uniapp 绘图
uniapp 绘图方法
使用 Canvas 组件
uniapp 支持通过 canvas 组件实现绘图功能。在模板中声明 canvas 并设置宽度、高度和 ID，通过 JavaScript 调用绘图 API。
<template>
<view>
<canvas canvas-id="myCanvas" style="width: 300px; height: 200px;"></canvas>
</view>
</template>在 script 中通过 uni.createCanvasContext 获取绘图上下文，调用绘图方法：
export default {
onReady() {
const ctx = uni.createCanvasContext('myCanvas');
ctx.setFillStyle('#ff0000');
ctx.fillRect(10, 10, 150, 75);
ctx.draw();
}
}使用第三方图表库
uniapp 可以集成第三方图表库如 ucharts 或 echarts 实现复杂图表绘制。
安装 ucharts：
npm install @qiun/ucharts在页面中引入并使用：
import uCharts from '@qiun/ucharts';
export default {
onReady() {
new uCharts({
canvasId: 'myChart',
type: 'pie',
series: [{data: 25}, {data: 75}],
width: 300,
height: 200
});
}
}使用 SVG 绘图
通过 svg 标签直接绘制矢量图形，适用于简单图形和图标。
<template>
<view>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
</view>
</template>性能优化建议
绘图操作可能消耗较多资源，尤其在频繁重绘时。建议使用 canvasToTempFilePath 将绘图结果保存为图片，减少重复绘制。
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
success(res) {
console.log(res.tempFilePath);
}
});对于动态图表，合理使用 requestAnimationFrame 控制绘制频率，避免过度消耗性能。
