uniapp 中 使用canvas 画图,安卓偶尔会出现空白问题,并没有报错,显示成功但是没有图
const drawCanvas = () => {
const context = uni.createCanvasContext('myCanvas', this);
if (!context) {
console.error('Failed to get canvas context');
return;
}
const query = uni.createSelectorQuery().in(this);
query.select('.canvs').boundingClientRect(data => {
if (data) {
if (data.height <= 0) {
console.warn('Canvas container height is zero');
return;
}
console.log('Canvas container size:', data);
const canvasWidth = data.width;
const canvasHeight = data.height;
let num1 = 14
let num2 = 10
if (windowHeight >= 768) {
num1 = 26
num2 = 20
}
const centerX = canvasWidth / 2;
const centerY = canvasHeight / 2 - num1; // 向下移动 50 像素
const radius = Math.min(canvasWidth, canvasHeight) / 2 + num2; // 留出一些边距
const colors = ['#c8e5b3', '#acd78e', '#588e31', '#3b5f21'];
for (let i = 0; i < 4; i++) {
context.beginPath();
context.moveTo(centerX, centerY);
context.arc(centerX, centerY, radius, Math.PI * (i / 4), Math.PI * ((i + 1) / 4));
context.closePath();
context.setFillStyle(colors[i]);
context.fill();
}
context.beginPath();
context.arc(centerX, centerY, radius / 2 + 5, 0, 2 * Math.PI);
context.closePath();
context.setFillStyle('#262626');
context.fill();
context.beginPath();
context.moveTo(centerX - radius, centerY);
context.lineTo(centerX + radius, centerY);
context.setStrokeStyle('#262626');
context.stroke();
context.draw(false, () => {
// console.log('Canvas drawing callback executed');
});
console.log('Canvas drawing completed');
} else {
// console.error('Failed to get boundingClientRect data');
}
}).exec();
}
0 个回复