时间戳

首页 > 解决方案 > 画布 - 看不到我星星的颜色

javascript - 画布 - 看不到我星星的颜色

问题描述

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

代码：

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/

标签： javascriptcanvas

解决方案

您缺少 arc 函数的半径参数。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是恒星的半径。

推荐阅读