एनीमेशन पाश और स्केलिंग

खैर मुझे पूछने के लिए कुछ सवाल है! सबसे पहले यह कोड क्या कर रहा है अद्वितीय घनत्व वाले स्नोफ्लेक्स बना रहा है और ड्राइंग कर रहा है जो सभी एक अलग दर पर गिरेंगे। मेरा पहला सवाल यह है कि मैं इस लूप को लगातार कैसे बना सकता हूं?

दूसरा, मैंने कैनवास के बीच में अपने मूल बिंदु (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< treeObj.length; i++)
        {
        context.save();
        context.translate(Xi-H,Yy-W);
        context.scale(1, 1);
        treeObj[0].draw(context);
        context.restore();
        } 
    } 

        setInterval(update, 33);




}
0
अभी कर रहा हूँ :)
जोड़ा लेखक Ben Connor Hansell, स्रोत
जोड़ा लेखक Ben Connor Hansell, स्रोत
आप बहुत ज्यादा एसओओ से ज्यादा !!!
जोड़ा लेखक Ben Connor Hansell, स्रोत
यदि कोई कामकाजी उदाहरण है तो डीबग करना आसान होगा - यानी हमें एक jsfiddle.net लिंक दें जिसे हम एक्सप्लोर कर सकते हैं।
जोड़ा लेखक broofa, स्रोत
jsfiddle.net/L5qUZ/1 कुछ निश्चित समस्याएं
जोड़ा लेखक ViliusL, स्रोत

1 उत्तर

आपकी एनीमेशन के बारे में:

क्या हो रहा है कि कैनवास के नीचे नीचे आपके फ्लेक्स दिखाई दे रहे हैं।

So when any flake's p.y+p.r > canvas.height you could:

  • उस फ्लेक को नष्ट करें और (वैकल्पिक रूप से) कैनवास के ऊपर से गिरने वाले दूसरे को जोड़ें

या

  • "रीसायकल" जो कैनवास के ऊपर अपने पी.ई. को बदलकर फ्लेक करता है।

संदर्भ के बिना काम कर रहे आपके डिज़ाइन के बारे में .clearRect:

अपने डिजाइन में, जब आप पूरे आकाश को "आकाश" से भरते हैं, तो आप प्रभावी रूप से कैनवास को साफ़ कर रहे हैं।

अपने फ्लेक्स के बारे में केवल आधा स्क्रीन पर गिर रहा है:

मध्य स्क्रीन पर अनुवाद करने के बजाय:

  • बिल्कुल अनुवाद न करें और पी.एक्स को कोई भी गणित दें। यादृच्छिक() * canvas.width
0
जोड़ा