循环上的putImageData
循环上的putImageData
提问于 2018-12-01 02:57:16
我试图建立一个美丽的图形图像(动画！)，计算每个像素在一个屏幕上的颜色，然后显示所有像素一次。所以，我在循环中使用了一个putImageData函数。
但出于某种原因它不起作用。只有最后一次迭代可以在屏幕上看到(在1-2秒之后)。
每次迭代之后，我都尝试使用FillRect，但是没有帮助。
<html>
<head>
<title>Full Screen Canvas Test</title>
<style>
html, body {
overflow: hidden;
margin: 0;
}
</style>
</head>
<body>
<canvas id="mainCanvas"></canvas>
<script>
(function () {
canvas = document.getElementById('mainCanvas');
ctx = canvas.getContext("2d");
canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
step = 1;
function doit() {
rx = Math.floor(Math.random()*canvas.width);
ry = Math.floor(Math.random()*canvas.height);
gx = Math.floor(Math.random()*canvas.width);
gy = Math.floor(Math.random()*canvas.height);
bx = Math.floor(Math.random()*canvas.width);
by = Math.floor(Math.random()*canvas.height);
var canvasData = ctx.createImageData(canvas.width, canvas.height);
for (var i = 0; i < canvas.width; i+=step) {
for (var j = 0; j < canvas.height; j+=step) {
po = 2;
rd = Math.floor(Math.sqrt(Math.pow(rx - i, po)+Math.pow(ry - j, po)));
gd = Math.floor(Math.sqrt(Math.pow(gx - i, po)+Math.pow(gy - j, po)));
bd = Math.floor(Math.sqrt(Math.pow(bx - i, po)+Math.pow(by - j, po)));
maxd = 1400;
r = Math.floor((1 - rd/maxd)*255);
g = Math.floor((1 - gd/maxd)*255);
b = Math.floor((1 - bd/maxd)*255);
var index = (i + j * canvas.width) * 4;
canvasData.data[index + 0] = r;
canvasData.data[index + 1] = g;
canvasData.data[index + 2] = b;
canvasData.data[index + 3] = 255;
}
}
ctx.putImageData(canvasData, 0, 0);
}
doit();
doit();
doit();
doit();
doit();
doit();
doit();
doit();
})();
</script>
</body>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-01 03:13:47
您需要使用setInveral()多次调用doit()函数，每次调用之间都有时间延迟。当前方法的问题是，它在一次迭代中运行所有doit()结果，然后只在覆盖以前的结果时显示最后一个结果。因此，您需要依次显示每个结果。
见下面的工作示例：
<html>
<head>
<title>Full Screen Canvas Test</title>
<style>
html,
body {
overflow: hidden;
margin: 0;
}
</style>
</head>
<body>
<canvas id="mainCanvas"></canvas>
<script>
(function() {
canvas = document.getElementById('mainCanvas');
ctx = canvas.getContext("2d");
canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
step = 1;
function doit() {
rx = Math.floor(Math.random() * canvas.width);
ry = Math.floor(Math.random() * canvas.height);
gx = Math.floor(Math.random() * canvas.width);
gy = Math.floor(Math.random() * canvas.height);
bx = Math.floor(Math.random() * canvas.width);
by = Math.floor(Math.random() * canvas.height);
var canvasData = ctx.createImageData(canvas.width, canvas.height);
for (var i = 0; i < canvas.width; i += step) {
for (var j = 0; j < canvas.height; j += step) {
po = 2;
rd = Math.floor(Math.sqrt(Math.pow(rx - i, po) + Math.pow(ry - j, po)));
gd = Math.floor(Math.sqrt(Math.pow(gx - i, po) + Math.pow(gy - j, po)));
bd = Math.floor(Math.sqrt(Math.pow(bx - i, po) + Math.pow(by - j, po)));
maxd = 1400;
r = Math.floor((1 - rd / maxd) * 255);
g = Math.floor((1 - gd / maxd) * 255);
b = Math.floor((1 - bd / maxd) * 255);
var index = (i + j * canvas.width) * 4;
canvasData.data[index + 0] = r;
canvasData.data[index + 1] = g;
canvasData.data[index + 2] = b;
canvasData.data[index + 3] = 255;
}
}
ctx.putImageData(canvasData, 0, 0);
}
// Use setInterval to display the images sequentially (every 1000 m/s (every second))
let showImg = setInterval(doit, 1000);
})();
</script>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53567386
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号