小游戏在安卓小米Max中绘制图片出现重复平铺 - WXOPEN Club

小游戏在安卓小米Max中绘制图片出现重复平铺，在苹果手机中正常显示原图片大小

import './js/libs/weapp-adapter'

var sun = new Image();

var moon = new Image();

var earth = new Image();

function init() {

sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';

moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';

earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';

requestAnimationFrame(draw);

}

function draw() {

var ctx=canvas.getContext('2d');

ctx.globalCompositeOperation = 'destination-over';

ctx.clearRect(0, 0, 300, 300); // clear canvas

ctx.fillStyle = 'rgba(0,0,0,0.4)';

ctx.strokeStyle = 'rgba(0,153,255,0.4)';

ctx.save();

ctx.translate(150, 150);

// Earth

var time = new Date();

ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());

ctx.translate(105, 0);

ctx.fillRect(0, -12, 50, 24); // Shadow

ctx.drawImage(earth, -12, -12);

// Moon

ctx.save();

ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());

ctx.translate(0, 28.5);

ctx.drawImage(moon, -3.5, -3.5);

ctx.restore();

ctx.beginPath();

ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit

ctx.stroke();

ctx.drawImage(sun, 0, 0, 300, 300);

requestAnimationFrame(draw);

}

init();

该问题是由于部分手机在游戏某帧绘制时，对于未绘制全屏的图案进行重复平铺导致的，请确保每一帧都画满全屏即可解决此问题。