如何取消显示图像 (CANVAS)答案

【问题标题】：How to Undisplay an Image (CANVAS)如何取消显示图像 (CANVAS)
【发布时间】：2020-03-09 19:50:19
【问题描述】：

我正在尝试想出一种方法，让图像在屏幕内外切换几秒钟。（进入屏幕并停留约 5 秒钟，然后转出并保持隐藏）。我已经有了转入的代码，我的问题是让它转出。

这是代码中的转换。

let canvas = null;
let ctx = null;

window.onload = onAllAssetsLoaded;

function onAllAssetsLoaded() {
  // stopAndHide the webpage loading message
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  canvas.width = canvas.clientWidth;
  canvas.height = canvas.clientHeight;

  /* Step 1 of 3 */
  /* Start the animations */
  setTimeout(startImageAnimation, 2000);

  renderCanvas();
}


/* Step 2 of 3 */
/* Each animation needs its own code */
/******************************************************************************/
/* These three are ALWAYS needed */
let imageAnimationInterval = null;
const IMAGE_FRAMERATE = 5; // change to suit the animation frameRate in milliseconds. Smaller numbers give a faster animation */
let imageAnimationIsDisplayed = false;

/* These variables depend on the animation */
let image = new Image();
image.src = "http://i.stack.imgur.com/UFBxY.png";

let imageX = 0;
let imageY = 0;
let size = 0;

function startImageAnimation() {
  imageAnimationIsDisplayed = true;
  imageAnimationInterval = setInterval(updateImageAnimation, IMAGE_FRAMERATE);
}


function stopImageAnimation() {
  imageAnimationIsDisplayed = true;
  clearInterval(imageAnimationInterval);
  imageAnimationInterval = null; // set to null when not running           
}


function stopAndHideImageAnimation() {
  stopImageAnimation();
  imageAnimationIsDisplayed = false;
}


function updateImageAnimation() {
  size++;

  if (size === canvas.width) {
    stopImageAnimation();
  }
}


function renderImageAnimation() {
  if (imageAnimationIsDisplayed) {
    ctx.drawImage(image, imageX, imageY, size, size);
  }
}
/******************************************************************************/



/******************************************************************************/


function renderCanvas() {
  requestAnimationFrame(renderCanvas);
  ctx.clearRect(0, 0, canvas.width, canvas.height);


  /* Step 3 of 3 */
  /* Drawn the animations */
  renderImageAnimation();
}

&lt;canvas id="canvas"&gt;

【问题讨论】：

您的标题有点误导...您确实知道如何“取消显示”或清除画布中的某些内容，并且您正在使用它：ctx.clearRect(0, 0, canvas.width, canvas.height); ...我猜您只是需要帮助带有过渡/动画

标签： canvas html5-canvas canvasjs

【解决方案1】：

在您的updateImageAnimation 中，您通过增加尺寸 (size++;) 获得了要过渡的图像，过渡出来的一个想法是缩小它 (size--;)。

请参阅下面的示例，我使用变量 (delta) 来控制过渡，并在正负之间交替来增加或减小图像的大小。

let image = new Image();
image.src = "http://i.stack.imgur.com/UFBxY.png";
let size = 20;
let delta = 2;

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

setInterval(draw, 50);

function draw() {  
  if (size > canvas.height || size < 10) {
    delta *= -1
  }
  size += delta;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(image, 0, 0, size, size);
}

&lt;canvas id="canvas"&gt;

【讨论】：