如何使畫布形狀隨着時間的流逝而消失和消失？

Question

我有幾種不同的形狀（我只包括了三角形的代碼，因為它們都是一樣的），這些形狀是在用戶旋轉鼠標滾輪時生成的，但是我不知道如何使它們隨着時間消失。屏幕不僅很快就被完全填滿。 這是代碼：

<html>
<head>
<script>
    var canvas;
    var context;
    var triangles = [];
    var timer;

    function init() {
        canvas = document.getElementById('canvas');
        context = canvas.getContext("2d");
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas, false);
        window.addEventListener('orientationchange', resizeCanvas, false);
        canvas.onwheel = 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() * 30 - 15;
            this.vy = Math.random() * 30 - 15;
    }

function handleClick(x,y) {
        var colors = ['red','yellow','blue','purple','green'];
        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 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);
            context.fillStyle = triangle.triangleColor;
            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

            t.x += t.vx;
            t.y += t.vy;
        }
}

function fillBackgroundColor() {
    context.fillStyle = "black";
    context.fillRect(0,0,canvas.width,canvas.height);
}

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

Answer 1

我添加了時間作為三角形對象的屬性：

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

並基於時間的不透明性：

function drawTriangle(triangle) {
    ...
    var c = triangle.triangleColor
    context.fillStyle = 'rgba(' + c[0] + ', ' + c[1] + ', ' + c[2] + ', ' + (triangle.time / 100) + ')';

一旦時間用完，三角形將從列表中刪除：

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

另外，為了更容易使用rgba值繪制形狀，我將colors變量從字符串數組轉換為其rgb值數組的數組：

var colors = [[255,0,0],[255,255,0],[0,0,255],[128,0,128],[0,255,0]];

這是實現的一個jsfiddle：

https://jsfiddle.net/3Lh1ydb2/1/

如何使畫布形狀隨着時間的流逝而消失和消失？

問題描述

1 個解決方案

解決方案1
1 已采納 2016-12-10 08:29:51

如何使畫布形狀隨着時間的流逝而消失和消失？

問題描述

1 個解決方案

解決方案1 1 已采納 2016-12-10 08:29:51

解決方案1
1 已采納 2016-12-10 08:29:51