在Javascript中清除drawImage（）函数[重复]

Posted 2023-03-05

【中文标题】在Javascript中清除drawImage（）函数[重复]

【英文标题】：Clearing drawImage() function in Javascript [duplicate]

【发布时间】：2019-06-23 06:32:51

【问题描述】：

如何让画布清除之前的图像，使我的角色看起来像在移动？现在，它正在显示我的角色在屏幕上移动时的每一个动画。我在下面贴了一张照片。

这是我的 javascript

function update()
var imageObj = new Image();
if(fr1)
imageObj.src = 'https://i.ibb.co/yhbRD1R/Mega1.png';


if(fr2)
imageObj.src = 'https://i.ibb.co/S74hLKX/Mega2.png';

if(fr3)
imageObj.src = 'https://i.ibb.co/tC1j7wC/Mega3.png';

if(fr4)
imageObj.src = 'https://i.ibb.co/Tr2cqH9/Mega4.png';

if(fr5)
imageObj.src = 'https://i.ibb.co/jvr49xx/Mega5.png';


if(fr6)
imageObj.src = 'https://i.ibb.co/BrQnPNR/Mega6.png';

if(fr7)
imageObj.src = 'https://i.ibb.co/CJdzqGR/Mega7.png';

if(fr8)
imageObj.src = 'https://i.ibb.co/frbN0Dj/Mega8.png';

if(fr9)
imageObj.src = 'https://i.ibb.co/RjLL6z1/Mega9.png';

if(fr10)
imageObj.src = 'https://i.ibb.co/2ypxYjw/Mega10.png';

var canvas= document.getElementById('canvas');
var context = canvas.getContext('2d');

image1.style.visibility="hidden";
imageObj.onload = function() 

context.drawImage(imageObj,mainx,mainy,100,100);
;

这是发生了什么：

【问题讨论】：

你能提供一个可运行的sn-p吗？通过添加代码 sn-p（使用 CTRL+M）或添加 js 小提琴？

不直接相关，但切勿在游戏运行时加载新资源。在开始其他任何操作之前，您应该加载所有这些图像一次。然后你只需绘制这些加载的图像（在单个图像文件中甚至会更好）

【参考方案1】：

您可以在每次加载新图片时使用context.clearRect(x, y, width, height)。此外，我通过将所有动画精灵放入一个数组中，然后使用frameCount % frames.length 选择给定的帧，稍微简化了您的代码。这里frameCount 是一个变量，每个游戏循环都会递增（每次setInterval 运行）。因此，使用模运算符%，您可以将数字限制在数组的0 和length 之间，从而允许您在每次循环运行时从frames 数组中选择一个新帧。

请参阅下面的工作示例：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var mainx = 0;
var mainy = canvas.height/2;

var frames = ['https://i.ibb.co/yhbRD1R/Mega1.png',
'https://i.ibb.co/S74hLKX/Mega2.png',
'https://i.ibb.co/tC1j7wC/Mega3.png',
'https://i.ibb.co/Tr2cqH9/Mega4.png',
'https://i.ibb.co/jvr49xx/Mega5.png',
'https://i.ibb.co/BrQnPNR/Mega6.png',
'https://i.ibb.co/CJdzqGR/Mega7.png',
'https://i.ibb.co/frbN0Dj/Mega8.png',
'https://i.ibb.co/RjLL6z1/Mega9.png',
'https://i.ibb.co/2ypxYjw/Mega10.png'];

function update(fr) 
  var imageObj = new Image();
  imageObj.src = frames[fr];
  
  imageObj.onload = function() 
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(imageObj, mainx, mainy, 100, 100);
  ;
  
  mainx = (mainx + 10) % canvas.width; // update position of character
  frameCount += 1; // update frame count to move to next image frame


var frameCount = 0;
setInterval(function() 
  update(frameCount % frames.length);
, 100)

<canvas id="canvas" height="200" width="500" style="border: 1px solid black;"></canvas>

【参考方案2】：

尝试将context.clearRect(0, 0, canvas.width, canvas.height); 放在context.drawImage(imageObj,mainx,mainy,100,100); 之前。