收藏
回答

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

问题模块 框架类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小游戏 canvas 客户端 Android 6.6.3 7.0

小游戏在安卓小米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.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();
最后一次编辑于  2018-02-28  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

1 个回答

  • Link
    Link
    2018-02-28

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

    2018-02-28
    赞同
    回复