动画帧会覆盖自身。为什么？使用p5.js
动画帧会覆盖自身。为什么？使用p5.js
提问于 2018-11-11 14:46:22
我正在使用视频输入在画布上绘制，以便在画布的最中间获得像素的颜色。
使用最近的代码，我获得了像素颜色，并将其作为颜色值传递以绘制一条线。这条线应该从左到右，将视频的不同颜色绘制到画布上，并与每一条线相加。但这条线似乎被每一帧覆盖了。只显示一条从左向右移动的线。有人能帮我理解为什么以及如何改变这种行为吗？
非常提前感谢您。
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>回答 1
Stack Overflow用户
发布于 2018-11-11 17:27:44
对background()的调用将清除旧帧。
如果希望旧帧留在屏幕上，请在draw()函数中删除对background()的调用。
更多信息可以在the reference上找到。我还建议您通读您的代码，并确保您理解每一行。大声朗读可能会有所帮助，或者写下每一行的英文描述。这将帮助您在未来找到类似的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53249833
复制相关文章
相似问题
腾讯云开发者
