javascript - 为什么这些圆圈会出现在我的 Canvas 上？

Question

http://codepen.io/Yonkai/pen/PmyJZK

YMMV，但对我来说，这些奇怪的圆圈东西出现在三 Angular 形部分内的动画右侧，这是我的代码、计算机屏幕(假设你也看到了)、 Canvas 、codepen、编程的产物吗，错觉？有这个名字吗？不确定为什么会出现。

// Creating canvas object and setting context.
var c = document.getElementById('c');
var ctx = c.getContext("2d");
    
// Setting canvas height and width to height and width of the canvas.
c.height = window.innerHeight;
c.width = window.innerWidth;

// Declaring the row size, matrix info >none here<, font size which correlates to font size.
var matrix = " "; 
matrix = matrix.split(" ");
var font_size = 5;  
var rows = c.height / font_size;
var drops = [];

// First row setup
for (var x = 0; x < rows; x++) 
{
  drops[x] = 1; 
}

function draw() {  
  
  // Screen Refresh
  ctx.fillStyle = "rgba(0,0,0,.001)"; 
  ctx.fillRect(1, 1, c.width,c.height); 
  
  //Determines color, moddable if you understand HEX colors.
   function getRandomColor() {
    var letters = '0F';
    var color = '#';
    var grayscale = letters[Math.floor(Math.random() * 16)]
    for (var i = 0; i <6; i++) {
      color += grayscale; 
    }
    return color;
  }
 
  // When matrix used.
  ctx.font = font_size + "px Courier New";

  // Advances rows or columns across the screen, technically asynchronous but happens so fast
  // it doesn't appear to me.
  for (var i = 0; i < drops.length; i++) 
  {
    ctx.fillStyle = getRandomColor();
    var text = matrix[Math.floor(Math.random() * matrix.length)]; 
      
    // Random value in the matrix array.
    ctx.fillText(text, drops[i] * font_size,font_size * i); 
    
    ctx.beginPath();
    ctx.moveTo(c.width/2,c.height/2);
    ctx.lineWidth = Math.floor(Math.random() * 1) + 3;  
    ctx.lineTo( drops[i] * font_size,font_size * i);
    ctx.strokeStyle = getRandomColor();
    ctx.stroke();
   
    //Makes a uniform picture by switching the overlay type halfway through the canvas picture.
    if (drops[i] * font_size > (c.width/2) ) {
        ctx.globalCompositeOperation = 'destination-over';
    }
    
    // Resets rows, currently redraws under screen so does little, but useful for modification.
    if (drops[i] * font_size > c.width && Math.Random() > 0.9 ) {
        drops[i] = 0;
    }

    drops[i]++;
  }
}

// 'Tick' rate of animation.
setInterval(draw, 300);

Answer 1

正如 Jaromanda X 所指出的，这个问题似乎是 moire模式，这是由于高对比度线靠得太近(因此它们接近奈奎斯特频率)。为了解决这个问题，出现了计算机图形概念，例如线性过滤(它基本上是根据附近像素颜色的加权平均值计算像素颜色)。

但是，对于更简单的修复，您可以通过减少向文本发出的此类线条的数量来增加扫描线之间的距离，或者尝试使用对比度较低的线条(灰色阴影或其他颜色)。