Question

嗯，我有几个问题要问！首先，这段代码正在做的是创建和绘制具有独特密度的雪花，这些雪花将以不同的速率下降。我的第一个问题是如何使这个循环连续？

其次，我将原点（0,0）翻译到画布的中间（它是标准的一部分）。我现在遇到了这个问题，当降雪被调用时，它将被绘制在屏幕的左侧或右侧，而不是两者。我该如何解决这个问题？

最后我知道在做动画时你必须在每次重新绘制后清除画布，但是我没有添加它，但它仍然可以正常工作？

//Check to see if the browser supports
//the addEventListener function
if(window.addEventListener)
{
    window.addEventListener
    (
        'load', //this is the load event
        onLoad, //this is the evemnt handler we going to write
        false //useCapture boolen value
    );
}

//the window load event handler
function onLoad(Xi, Yy) {
    var canvas, context,treeObj, H, W, mp;  
    Xi = 0;
    Yy = 0;
    mp = 100;

    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');

    W = window.innerWidth;
    H = window.innerHeight;
    canvas.width = W;
    canvas.height = H;
    context.translate(W/2, H/2);

    var particles = [];
    for(var i = 0; i < mp; i++) {

        particles.push({
        x: Math.random()*-W, //x
        y: Math.random()*-H, //y
        r: Math.random()*6+2, //radius
        d: Math.random()* mp // density
        })
    }


    treeObj = new Array();
    var tree = new TTree(Xi, Yy);
    treeObj.push(tree);



    function drawCenterPot(){
        context.beginPath();
        context.lineWidth = "1";
        context.strokeStyle = "Red";
        context.moveTo(0,0);
        context.lineTo(0,-H);
        context.lineTo(0, H);
        context.lineTo(-W, 0);
        context.lineTo(W,0);
        context.stroke();
        context.closePath();
    }

    function drawMountain() {
        context.beginPath();
        context.fillStyle = "#FFFAF0";
        context.lineWidth = "10";
        context.strokeStyle = "Black";
        context.moveTo(H,W);
        context.bezierCurveTo(-H*10,W,H,W,H,W);
        context.stroke();
        context.fill();
    }

    function drawSky() {
        var linearGrad = context.createLinearGradient(-100,-300, W/2,H);
        linearGrad.addColorStop(0, "#000000");
        linearGrad.addColorStop(1, "#004CB3");
        context.beginPath();
        context.fillStyle = linearGrad;
        context.fillRect(-W/2, -H/2, W, H);
        context.stroke();
        context.fill();


        drawMountain();
        drawCenterPot();

    }




    function drawSnow(){
    context.fillStyle = "White";
        context.beginPath();
        for(i = 0; i<mp; i++) 
        {
            var p = particles[i];
            context.moveTo(p.x,p.y);
            context.arc(p.x, p.y, p.r, Math.PI*2, false);
        }
        context.fill();
    } 


    function update() {
        var angle = 0;
        angle+=0.1;
        for(var i=0; i<mp; i++) {
            var p = particles[i];
            p.x += Math.sin(angle) * 2;
            p.y += Math.cos(angle+p.d) + 1 * p.r;
        }

        drawSky();
        drawSnow();
        draw();
    }

    function draw() {
        for(var i =0; i < treeObj.length; i++)
        {
        context.save();
        context.translate(Xi-H,Yy-W);
        context.scale(1, 1);
        treeObj[0].draw(context);
        context.restore();
        } 
    } 

        setInterval(update, 33);




}

Answer 1

关于您的动画：

正在发生的事情是你的薄片在画布底部下方掉出了视线。

所以当任何片状物p.y + p.r＆gt; canvas.height你可以：

摧毁那片并且（可选）添加另一个从画布上方落下的

或

通过将其p.y更改为画布上方来“回收”该片状。

关于您的设计在没有上下文的情况下工作.clearRect：

在你的设计中，当你用“天空”填充整个画布时，你正在有效地清理画布。

关于你的片只落在屏幕的一半：

而不是翻译到屏幕中间：

根本不要翻译，让p.x成为任何Math.random（）* canvas.width

动画循环和缩放

1 个答案: