Question

如何让形状像文字一样消失？我已经完成了代码并且它们实际上完全相同，只是当用户旋转鼠标滚轮时创建了一个，而当用户点击屏幕时创建了另一个，但文本在时间之后消失了三角形没有。我觉得我必须缺少一些小东西。这是代码：

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

Answer 1

这是因为三角形时间不是3的倍数，而当你检查if语句时文本时间是这样的：

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

永远不会这样。

您可以通过将if语句更改为：

来解决此问题

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

这实际上是我的错，因为它是我之前回答中的错误。对不起。

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

为什么这个文字会消失而不是形状？

1 个答案: