Question

我正在使用视频输入画在画布上，以便获得画布中间的像素颜色。

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

非常感谢您。

content-type

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;
}

Answer 1

对background()的调用清除了旧框架。

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

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

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

1 个答案: