canvas 中的动画点,奇怪的线条行为,点的速度 > 1 按帧
animating dots in canvas, strange line behaviours with speed of dots > 1 by frame
正在尝试为 javascript canvas 上的点(图像数据 1x1)设置动画以制作星空。
奇怪的是,当那些点以高于 1 的速度移动时,会出现闪烁或其他任何显示不是点而是线的现象。
这里有一个fiddle来表示奇怪:http://jsfiddle.net/xp6xd8q1/1/
function clearCanvas() {
ctx.fillStyle = '#000000';
ctx.fillRect(0,0,w,h);
}
function stars() {
this.manyStars = [];
this.addStars = function(nb) {
var i,x,y;
for(i=0;i<nb;i++) {
x = Math.floor(Math.random() * w);
y = Math.floor(Math.random() * h);
this.manyStars.push({x: x,y: y,s: 5}); // dot speed is s
}
}
this.move = function() {
var i,l;
for(i=0,l = this.manyStars.length;i<l;i++) {
this.manyStars[i].x = this.manyStars[i].x - this.manyStars[i].s;
if(this.manyStars[i].x < 0) {
this.manyStars[i].x = w + this.manyStars[i].x;
}
}
}
this.drawStars = function() {
var i,l;
for(i=0,l = this.manyStars.length;i<l;i++) {
ctx.putImageData(dot,this.manyStars[i].x,this.manyStars[i].y);
}
}
}
function run() {
clearCanvas();
s.move();
s.drawStars();
window.requestAnimationFrame(run);
}
//
window.requestAnimationFrame = window.requestAnimationFrame||window.mozRequestAnimationFrame ||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;
var cv = document.createElement('canvas');
var w = window.innerWidth, h = window.innerHeight;
cv.width = w;
cv.height = h;
var ctx = cv.getContext('2d');
document.body.appendChild(cv);
//
var dot = ctx.createImageData(1,1);
dot.data = [255,255,255,255];
s = new stars();
s.addStars(10);
window.requestAnimationFrame(run);
欢迎提出任何想法!
我也看到了。这些点在移动时似乎被拉伸了。我以多种速度对 canvas 进行了截图。这些点实际上只有 1x1 像素。
我相信您可能正在经历 Display Motion Blur。这是显示器工作方式的结果,也因为当光线变化时,您眼睛中的视觉细胞需要一些时间来重新调整。
除了试图隐藏它之外,你真的无能为力。移动的物体越大越慢越不明显
当显示刷新率增加时,它也会变得不那么明显。参见 this example。由于您无法控制用户显示器的刷新率,因此这对您没有任何帮助。
正在尝试为 javascript canvas 上的点(图像数据 1x1)设置动画以制作星空。
奇怪的是,当那些点以高于 1 的速度移动时,会出现闪烁或其他任何显示不是点而是线的现象。
这里有一个fiddle来表示奇怪:http://jsfiddle.net/xp6xd8q1/1/
function clearCanvas() {
ctx.fillStyle = '#000000';
ctx.fillRect(0,0,w,h);
}
function stars() {
this.manyStars = [];
this.addStars = function(nb) {
var i,x,y;
for(i=0;i<nb;i++) {
x = Math.floor(Math.random() * w);
y = Math.floor(Math.random() * h);
this.manyStars.push({x: x,y: y,s: 5}); // dot speed is s
}
}
this.move = function() {
var i,l;
for(i=0,l = this.manyStars.length;i<l;i++) {
this.manyStars[i].x = this.manyStars[i].x - this.manyStars[i].s;
if(this.manyStars[i].x < 0) {
this.manyStars[i].x = w + this.manyStars[i].x;
}
}
}
this.drawStars = function() {
var i,l;
for(i=0,l = this.manyStars.length;i<l;i++) {
ctx.putImageData(dot,this.manyStars[i].x,this.manyStars[i].y);
}
}
}
function run() {
clearCanvas();
s.move();
s.drawStars();
window.requestAnimationFrame(run);
}
//
window.requestAnimationFrame = window.requestAnimationFrame||window.mozRequestAnimationFrame ||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;
var cv = document.createElement('canvas');
var w = window.innerWidth, h = window.innerHeight;
cv.width = w;
cv.height = h;
var ctx = cv.getContext('2d');
document.body.appendChild(cv);
//
var dot = ctx.createImageData(1,1);
dot.data = [255,255,255,255];
s = new stars();
s.addStars(10);
window.requestAnimationFrame(run);
欢迎提出任何想法!
我也看到了。这些点在移动时似乎被拉伸了。我以多种速度对 canvas 进行了截图。这些点实际上只有 1x1 像素。
我相信您可能正在经历 Display Motion Blur。这是显示器工作方式的结果,也因为当光线变化时,您眼睛中的视觉细胞需要一些时间来重新调整。
除了试图隐藏它之外,你真的无能为力。移动的物体越大越慢越不明显
当显示刷新率增加时,它也会变得不那么明显。参见 this example。由于您无法控制用户显示器的刷新率,因此这对您没有任何帮助。