javascript - 为什么这些圈子事物出现在我的 Canvas 事物上？

http://codepen.io/Yonkai/pen/PmyJZK
但对我来说，这些奇怪的圆圈出现在三角形部分的动画右侧，这是我的代码、计算机屏幕（假设你也看到了）、画布、代码笔、编程的产物，还是一种错觉？这个有名字吗？不知道为什么会出现。

// 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 collumns across the screen, technically asychnous 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);

最佳答案

正如Jaromanda X所指出的，这个问题似乎是moire模式，这是由于高对比度线过于靠近（使它们接近Nyquist频率）造成的。为了解决这个问题，有一些计算机图形学的概念，比如线性滤波（它基本上是根据附近像素颜色的加权平均值计算像素颜色）。
但是，对于更简单的修复，可以通过减少向文本发出的此类行的数量来增加扫描行之间的距离，或者尝试使用对比度较低的行（灰度或其他颜色的阴影）。

关于javascript - 为什么这些圈子事物出现在我的 Canvas 事物上？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44062194/