이 텍스트는 왜 사라지고 모양은없는 것입니까?

텍스트처럼 모양이 사라지게하려면 어떻게해야합니까? 코드를 살펴 보았는데 사용자가 마우스 휠을 돌릴 때 만들어지고 다른 하나는 사용자가 화면을 클릭 할 때 만들어 지지만 텍스트는 시간이 지나면 사라지고 삼각형은 사라지는 것을 제외하고는 거의 동일합니다. 나는 내가 놓쳐 버려야 할 작은 것이 있다고 생각한다. 여기에 코드입니다 :이 텍스트는 왜 사라지고 모양은없는 것입니까?

<html> 
<head> 
<script> 
var canvas; 
var context; 
var triangles = []; 
var texts = []; 
var timer; 
var textSayings = ['Cool!', 'Nice!', 'Awesome!', 'Wow!', 'Whoa!', 'Super!', 'Woohoo!', 'Yay!', 'Yeah!', ':)', ':D']; 

function init() { 
    canvas = document.getElementById('canvas'); 
    context = canvas.getContext("2d"); 
    //resize canvas to fit the window 
    resizeCanvas(); 
    window.addEventListener('resize', resizeCanvas, false); 
    window.addEventListener('orientationchange', resizeCanvas, false); 

    canvas.onwheel = function(event) { 
     handleWheel(event.clientX, event.clientY); 
    }; 

    canvas.onclick = function(event) { 
     handleClick(event.clientX, event.clientY); 
    } 

    var timer = setInterval(resizeCanvas, 30); 
} 

function Triangle(x,y,triangleColor) { 
    this.x = x; 
    this.y = y; 
    this.triangleColor = triangleColor; 

    this.vx = Math.random() * 80 - 40; 
    this.vy = Math.random() * 80 - 40; 
    this.time = 250; 
} 

function Text(x,y,textColor,word) { 
    this.x = x; 
    this.y = y; 
    this.word = word; 
    this.textColor = textColor; 

    this.vx = Math.random() * 20 - 10; 
    this.vy = Math.random() * 20 - 10; 
    this.time = 300; 
} 

function handleWheel(x,y) { 
    var colors = [[255,0,0],[255,255,255],[0,0,255]]; 
    var triangleColor = colors[Math.floor(Math.random()*colors.length)]; 
    triangles.push(new Triangle(x,y,triangleColor)); 
    for (var i=0; i<triangles.length; i++) { 
     drawTriangle(triangles[i]); 
    } 
} 

function handleClick(x,y) { 
    var colors = [[255,0,0],[255,255,0],[0,0,255]]; 
    var textColor = colors[Math.floor(Math.random()*colors.length)]; 
    texts.push(new Text(x,y,textColor,pickWord())); 
    for (var i=0; i<texts.length; i++) { 
     drawText(texts[i]); 
    } 
} 

function timeToFade(time) { 
    if(time > 100) { 
     return 1; 
    } 
    else { 
     return time/100; 
    } 
} 

function pickWord() { 
    return textSayings[Math.floor(Math.random() * textSayings.length)]; 
} 

function drawText(text) { 
    context.font = "bold 80px Verdana"; 
    var gradient=context.createLinearGradient(0,0,canvas.width,0); 
    gradient.addColorStop("0","magenta"); 
    gradient.addColorStop("0.25","yellow"); 
    gradient.addColorStop("0.5","lime"); 
    gradient.addColorStop("0.75","aqua"); 
    gradient.addColorStop("1.0","magenta"); 
    context.fillStyle = gradient; 
    context.fillText(text.word,text.x,text.y); 
} 

function drawTriangle(triangle) { 
    context.beginPath(); 
    context.moveTo(triangle.x,triangle.y); 
    context.lineTo(triangle.x+25,triangle.y+25); 
    context.lineTo(triangle.x+25,triangle.y-25); 
    var gradient = context.createLinearGradient(0,0,canvas.width,0); 
    gradient.addColorStop("0","red"); 
    gradient.addColorStop("0.25","salmon"); 
    gradient.addColorStop("0.5","aqua"); 
    gradient.addColorStop("0.75","lime"); 
    gradient.addColorStop("1.0","orange"); 
    context.fillStyle = gradient; 
    context.fill(); 
} 

function resizeCanvas() { 
    canvas.width = window.innerWidth-20; 
    canvas.height = window.innerHeight-20; 
    fillBackgroundColor(); 
    for (var i=0; i<triangles.length; i++) { 
     var t = triangles[i]; 
     drawTriangle(t); 

     if (t.x + t.vx > canvas.width || t.x + t.vx < 0) 
      t.vx = -t.vx 
     if (t.y + t.vy > canvas.height || t.y + t.vy < 0) 
      t.vy = -t.vy 
     if (t.time === 0) { 
      triangles.splice(i,1); 
     } 

     t.time -= 3; 
     t.x += t.vx; 
     t.y += t.vy; 
    } 
    for (var i=0; i<texts.length; i++) { 
     var te = texts[i]; 
     drawText(te); 

     if (te.x + te.vx > canvas.width || te.x + te.vx < 0) 
      te.vx = -te.vx 
     if (te.y + te.vy > canvas.height || te.y + te.vy < 0) 
      te.vy = -te.vy 
     if (te.time === 0) { 
      texts.splice(i,1); 
     } 

     te.time -= 3; 
     te.x += te.vx; 
     te.y += te.vy; 
    } 
} 

function fillBackgroundColor() { 
    context.globalCompositeOperation = 'source-over'; 
    context.fillStyle = 'rgba(0, 0, 0, 1)'; 
    context.fillRect(0,0,canvas.width,canvas.height); 
    context.globalCompositeOperation = 'lighter'; 
} 

window.onload = init; 
</script> 
</head> 
<body> 
    <canvas id="canvas" width="500" height="500"></canvas> 
</body> 
</html>

출처

2016-12-11 joelboti

텍스트 시간이 if 문 확인할 때 너무 동안 삼각형 시간, 3의 배수가 아닌 때문입니다 : 사실 결코

if (t.time === 0) { 
    triangles.splice(i,1); 
}

합니다.

당신은에 if 문을 변경하여이 문제를 해결할 수 있습니다 : 내 이전의 대답이었다 버그 이후

if (t.time <= 0) { 
    triangles.splice(i,1); 
}

이 실제로 내 잘못이다. 미안합니다.

jsfiddle : https://jsfiddle.net/0rst8def/

출처

2016-12-11 02:34:04

아, 내가 그런 작은 것을 알고 있었다 감사합니다. 사과하실 내용이 없으니 정말 고맙습니다. – joelboti

이 텍스트는 왜 사라지고 모양은없는 것입니까?

답변

관련 문제