이 원은 내 캔버스에 나타나는 이유는 무엇입니까? 이상한 원 일들이 triangly 부분 내부의 애니메이션에 대한 권리를 나타 나에게 나에

Question

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

YMMV하지만,이 내 코드, 컴퓨터 화면의 유물이다 (당신은 또한 그것을 볼 가정), 캔버스, 코드화, 프로그래밍, 착시 현상? 이 이름이 있나요? 그것이 왜 나타나는지 확실하지 않습니다. Jaromanda X에 의해 명시된 바와 같이

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

이 문제는 (되도록 그들이 나이키 스트 주파수에 접근하는) 고 콘트라스트 라인이 서로 너무 가깝게되는 결과 moire 패턴을 보인다. 이를 해결하기 위해 선형 필터링 (근본적인 픽셀 색상의 가중 평균을 기반으로 픽셀 색상을 계산)과 같은 컴퓨터 그래픽 개념이 있습니다.

그러나 더 간단한 수정을 위해 텍스트쪽으로 보내는 선의 양을 줄이거 나 또는 명암이 적은 선 (회색 음영 또는 다른 색상)을 사용하여 스캔 선 사이의 거리를 늘릴 수 있습니다.