canvas星空效果，背景圖片改為透明（255，255,255,0）后，星星拖的很長怎么辦？

問題描述

有一個需求是把這個星空特效背景加一張圖片。但是drawImage方法不能像backgroud那樣設置圖片的位置。思路就只剩下把星空背景改為透明的。但是這個背景我設置為其他顏色都是好好的，一旦設置為透明的就壞了。哪里的原因，怎么辦，求解答。

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

canvas 圖片描述

相關代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>星空屏保</title>

    <style>
        html,
        body {
            height: 100%;
            max-width: 100%;
            margin: 0;
            overflow: hidden;
            font-family: sans-serif
        }
        
        #space {
            width: 100%
        }

    </style>
</head>

<body>

    <canvas id="space"></canvas>

    <a href="#" id="warp"></a>
    
    

    <script>
        //based on an Example by @curran
        window.requestAnimFrame = (function() {
            return window.requestAnimationFrame
        })();
        var canvas = document.getElementById("space");
        var c = canvas.getContext("2d");

        var numStars = 1900;
        var radius = '0.' + Math.floor(Math.random() * 9) + 1;
        var focalLength = canvas.width * 2;
        var warp = 0;
        var centerX, centerY;

        var stars = [],
            star;
        var i;

        var animate = true;

        initializeStars();

        function executeFrame() {

            if(animate)
                requestAnimFrame(executeFrame);
                moveStars();
                drawStars();
        }

        function initializeStars() {
            centerX = canvas.width / 2;
            centerY = canvas.height / 2;

            stars = [];
            for(i = 0; i < numStars; i++) {
                star = {
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height,
                    z: Math.random() * canvas.width,
                    o: '0.' + Math.floor(Math.random() * 99) + 1
                };
                stars.push(star);
            }
        }

        function moveStars() {
            for(i = 0; i < numStars; i++) {
                star = stars[i];
                star.z--;

                if(star.z <= 0) {
                    star.z = canvas.width;
                }
            }
        }

        function drawStars() {
            var pixelX, pixelY, pixelRadius;

            // Resize to the screen
            if(canvas.width != window.innerWidth || canvas.width != window.innerWidth) {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
                initializeStars();
            }
            if(warp == 0) {            
                c.fillStyle = "#fff";   //這里一旦改成下面透明的，效果就會出問題，其他顏色則無礙
    //            c.fillStyle="rgba(255,255,255,0)"
                 c.fillRect(0, 0, canvas.width, canvas.height);
            }
            c.fillStyle = "rgba(0, 0, 0, " + radius + ")";
            for(i = 0; i < numStars; i++) {
                star = stars[i];

                pixelX = (star.x - centerX) * (focalLength / star.z);
                pixelX += centerX;
                pixelY = (star.y - centerY) * (focalLength / star.z);
                pixelY += centerY;
                pixelRadius = 1 * (focalLength / star.z);

                c.fillRect(pixelX, pixelY, pixelRadius, pixelRadius);

                c.fillStyle = "rgba(0, 0, 0, " + star.o + ")";
                //c.fill();
            }
        }


        executeFrame();
    </script>

</body>

</html>

你期待的結(jié)果是什么？實際看到的錯誤信息又是什么？

希望可以改成透明的背景讓我放張背景圖片，

回答

編輯回答

綰青絲

在drawStars函數(shù)里面的if (wap == 0)之前添加下面一行代碼：

c.clearRect(0, 0, canvas.width, canvas.height)

canvas在畫之前是不會清除已經(jīng)存在在畫布上的內(nèi)容的，如果沒有手動清除，canvas只會在原先的畫布上接著畫。
當設置的顏色不透明的時候，因為把canvas畫布整個圖上了一層不透明的顏色，所以畫布上原先的東西被蓋在下面了，所以看不見，但并不是清除了，所以當設置一個不透明的顏色的時候，原先的內(nèi)容就顯示出來了，也就是所有移動位置上的星星都會顯示出來，所以效果就是拉長的線。

2018年7月25日 09:54