动画帧会覆盖自己。为什么？使用 p5.js答案

【问题标题】：Animation frames overwrite themselves. Why? using p5.js动画帧会覆盖自己。为什么？使用 p5.js
【发布时间】：2018-11-12 01:28:01
【问题描述】：

我正在使用视频输入在画布上进行绘制，以获取画布中间像素的颜色。

使用最近的代码，我获得了像素颜色并将其作为颜色值传递以绘制一条线。这条线应该从左到右运行，将视频的不同颜色绘制到画布上，并与每一行相加。但是该行似乎被每一帧覆盖。仅显示一条从左向右移动的行。有人可以帮助我了解为什么以及如何改变这种行为吗？

非常感谢您。

let movie;
let playButton;
let movieInput = "/public/IMG_1569.m4v";
var playing = false;

function setup() {
    let canvas = createCanvas(534, 300);

    pixelDensity(1);
    movie = createVideo(movieInput);
    movie.size(width, height);

    playButton = createButton("play").addClass("button");
    playButton.mouseClicked(playVideo);
}

function draw() {
    if (playing) {
        movie.loadPixels();
        var i = image(movie, 0, 0, width, height);
        let pixelColor = get(width / 2, height / 2);
        background(255);
        let px = frameCount % width;
        stroke(pixelColor);
        var fineLine = line(px, 0, px, height);
    }
}

function playVideo() {
    if (playing) {
        movie.pause();
        playButton.html("play");
    } else {
        movie.play();
        playButton.html("pause");
    }

    playing = !playing;
}

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/public/style.css">
    <title>p5.js example</title>

  </head>
  <body>
<h1>p5 no.1</h1>

      <script src="/lib/p5.js"></script>
      <script src="/lib/p5.dom.js"></script>

      <script src="/sketch.js"></script>

  </body>
</html>

【问题讨论】：

交叉发布：discourse.processing.org/t/…

标签： javascript p5.js

【解决方案1】：

对background() 的调用会清除旧帧。

如果您希望旧帧留在屏幕上，请在您的 draw() 函数中删除对 background() 的调用。

更多信息请访问the reference。我还建议通读您的代码并确保您理解每一行。大声朗读或写下每一行的英文描述可能会有所帮助。这将帮助您在未来发现此类问题。

【讨论】：

谢谢。我用 copy() 而不是 image(...) 和 get(...) 解决了它，并删除了背景颜色。