爲什麼這些圈子的東西出現在我的畫布上？

Question

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

情況因人而異，但對我來說，以我這些怪圈的事情出現在triangly部內的動畫正確的，這是我的代碼，計算機屏幕的神器（假設你看到它也），帆布， 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 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模式，從高對比線過於靠近在一起而導致（使得它們接近奈奎斯特頻率）。爲了解決這個問題，有計算機圖形學概念，如線性濾波（基本上根據附近像素顏色的加權平均值計算像素顏色）。

但是，對於更簡單的修復，您可以通過減少向文本發出的這些線條的數量來增加掃描線之間的距離，或者嘗試使用對比度較低的線條（灰色或其他顏色的陰影）。