Question

YMMV，但对我来说，这些奇怪的圆圈事物出现在三角形部分内部的动画上，这是我的代码，电脑屏幕（假设你也看到它），画布，编码器，编程的神器，一种视错觉？这有名字吗？不知道为什么会出现。

// 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);

Answer 1

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

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

为什么这些圈子的东西出现在我的画布上呢？

1 个答案: