1***@qq.com
1***@qq.com
  • 发布:2024-07-24 10:56
  • 更新:2024-07-24 10:56
  • 阅读:329

uniapp 中 使用canvas 安卓偶尔出现空白

分类:uni-app

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();  
}
2024-07-24 10:56 负责人:无 分享
已邀请:

要回复问题请先登录注册