Question

我创建画布动画背景...但是...我看不到星星... 星星应该是白色的。

代码：

window.onload = sky();
        function sky(){
            var canvas = document.getElementById("sky");
            var ctx = canvas.getContext("2d");

            var W = window.innerWidth;
            var H = window.innerHeight;
            canvas.width = W;
            canvas.height = H;

            var ms = 100;
            var stars =[];

            for (var i=0; i<ms; i++){
                stars.push({
                    x: Math.random()*W,
                    y: Math.random()*H,
                    r: Math.random()*5+2,
                    d: Math.random()+1
                })
            }
            function drawStars(){
                ctx.clearRect(0,0,W,H);
                ctx.fillStyle = "white";
                ctx.beginPath();
                for(var i=0; i<ms; i++){
                    var s = stars[i];
                    ctx.moveTo(s.x, s.y);
                    ctx.arc(s.x, s.y, 0, Math.Pi*2, true);
                }
                ctx.fill();
                moveStars();
            }
            var angle = 0;
            function moveStars(){
                angle +=0.01;
                for( var i=0; i<ms; i++){
                    var s = stars[i];
                    s.y += Math.pow(s.d, 2)+1;
                    s.x += Math.sin(angle)*2;

                    if(s.y>H){
                        stars[i] = {x: Math.random()+W, y:0, r: s.r, d: s.d};
                    }
                }
            }
            setInterval(drawStars,25);
        }

我的背景颜色是黑色，所以我应该看到白色的星星... 小提琴：https://jsfiddle.net/w39fs7at/

Answer 1

您缺少弧函数的radius参数。而且Math.Pi是未定义的，它应该是Math.PI。

因此，将ctx.arc(s.x, s.y, 0, Math.Pi*2, true);更改为

ctx.arc(s.x, s.y, 5, 0, Math.PI*2, true);

其中5是星的半径。

Answer 2

要看的东西：

window.onload=sky();

应该是

window.onload=sky;

将加载事件处理程序设置为sky函数，而不是调用它的返回值。

ctx.clearRect(0,0,W,H);

将画布像素设置为透明的黑色，以使背景透明。如果背景是白色。...

ctx.fillStyle= "black";
ctx.fillRect(0,0,W,H);

将画布像素设置为纯黑色，这会遮盖背景色。

在调用上下文的arc方法时，radius参数丢失，而Math.Pi是Math.PI的错字。
要解决问题，请尝试

ctx.arc(s.x, s.y, s.r, 0, Math.PI*2, true);

剩下moveStars。我没有弄清楚应该怎么做。按照编码，它将星星移出屏幕，但过了一会儿（您必须等待），它们像一团坠落的星星一样回来：。

    "use strict";
    window.onload = sky;
    
    function sky(){
        var canvas = document.getElementById("sky");
        var ctx = canvas.getContext("2d");
    
        var W = window.innerWidth;
        var H = window.innerHeight;
        canvas.width = W;
        canvas.height = H;
    
        var ms = 100;
        var stars =[];
    
        for (var i=0; i<ms; i++){
            stars.push({
                x: Math.random()*W,
                y: Math.random()*H,
                r: Math.random()*2+5,
                d: Math.random()+1
            })
        }
        function drawStars(){
            ctx.fillStyle="black";
            ctx.fillRect(0,0,W,H);
            ctx.fillStyle = "white";
            ctx.beginPath();
            for(var i=0; i<ms; i++){
                var s = stars[i];
                ctx.moveTo(s.x, s.y);
                ctx.arc(s.x, s.y, s.r, 0, Math.PI*2, true); 
            }
            ctx.fill();
            moveStars();
        }
        var angle = 0;
        function moveStars(){
            angle +=0.01;
            for( var i=0; i<ms; i++){
                var s = stars[i];
                s.y += Math.pow(s.d, 2)+1;
                s.x += Math.sin(angle)*2;
    
                if(s.y>H){
                    stars[i] = {x: Math.random()+W, y:0, r: s.r, d: s.d};
                }
            }
        }
    
        setInterval(drawStars,25);
    }

<canvas id="sky"></canvas>

希望有帮助！

帆布-看不到我的星星的颜色

2 个答案: