Question

我的任务是让照片像雪一样落下，速度和密度作为输入。我的问题是，我不能出现多个图像，只有一个出现，而且不是连续的。

window.onload = function(){

	var button = document.getElementById("button"),
		myTimer;

	button.onclick = function(){
		//create canvas
		clearInterval(myTimer);
		var canvas = document.getElementById("sky");
		var ctx = canvas.getContext("2d");
		//set canvas fullscreen
		var W = window.innerWidth;
		var H = window.innerHeight;
		canvas.height = H;
		canvas.width = W;
		//generate snowflakes and atts
		var mf = 100; //max flakes
		var flakes = [];
		var velocity = document.getElementById("vel").value;
		var density = document.getElementById("dens").value;

		for(var i = 0; i < mf; i++){
			flakes.push({
				x: Math.random()*W, 
				y: Math.random()*H, 
				r: Math.random()*density + 2, 
				d: Math.random() + velocity
			})
		}
		//draw flakes
		function drawFlakes(){
			ctx.clearRect(0, 0, W, H);
			ctx.fillStyle = "White";
			ctx.beginPath();
			for(var i = 0; i < mf; i++){
				var f = flakes[i];
				// ctx.moveTo(f.x, f.y);
				// ctx.arc(f.x, f.y, f.r, 0, Math.PI*2, true);
				var base_image = new Image();
        base_image.src = 'assume its a cat png source is on my pc';
				base_image.onload = function(){
					ctx.drawImage(base_image, f.x, f.y, f.r + 50, f.r + 50);
				};		
			}
			ctx.fill();
			moveFlakes();
		}
		var angle = 0;
		
		//move flakes
		function moveFlakes(){
			angle += 0.01;
			for(var i = 0; i < mf; i++){
				var f = flakes[i];
				f.y += Math.pow(f.d, 2) + 1;
				f.x += Math.sin(angle)*2;
				
				if(f.y > H){
					flakes[i] = {x: Math.random()*W, y: 0, r: f.r, d: f.d};
				}
				// var base_image = new Image();
  				// base_image.src = 'Cat.png';
				// base_image.onload = function(){
				// 	ctx.drawImage(base_image, f.x, f.y, f.r + 50, f.r + 50);
				// };
				// I commented this section as I don't know if it's neccessary yet.

			}
		}	
		myTimer = setInterval(drawFlakes, 25);
	};
};

<!DOCTYPE html>
<html>
    <head>
        <script src="snow.js"></script>
        <!--<script src="picture-fall.js"></script>-->
         </script>
        <style>
            body {
                background: #102a54;
            }
        </style>        
    </head>
    <body>
        <form>
            <input id="vel" type="text" value="1">
            <input id="dens" type="text" value="7">
            <input id="button" type="button" value="Fall!">
        </form>
        <canvas id="sky"></canvas>

    </body>
</html>

如果我不使用来自片状物体的数据，我尝试了一种不同的方法来绘制图像，虽然我不知道如何为它们设置动画，但它确实有效。

window.onload = function(){
    var button = document.getElementById("button"),
		myTimer;

	button.onclick = function(){
        clearInterval(myTimer);
        var canvas = document.getElementById("sky");
        var ctx = canvas.getContext("2d");

        var W = window.innerWidth;
        var H = window.innerHeight;
        canvas.height = H;
        canvas.width = W;

        var mp = 100, //max pictures
            flakes = [];
        var velocity = document.getElementById("vel").value;
        var density = document.getElementById("dens").value;

        for(var i = 0; i < mp; i++){
			flakes.push({
				x: Math.random()*W, 
				y: Math.random()*H, 
				r: Math.random()*density + 2, 
				d: Math.random() + velocity
			})
		}

        function drawPictures(){
            ctx.clearRect(0, 0, W, H);
            ctx.fillStyle = "White";
            ctx.beginPath();
            for(var i = 0; i < mp; i++){
                // var f = flakes[i];
                var base_image = new Image();
                base_image.src = 'snowflake.png';
                base_image.onload = function(){
                    ctx.drawImage(base_image, Math.random()*W, 
				        Math.random()*H, 
				        Math.random()*density + 50, 
				        Math.random()*density + 50)
                };		
            }
            ctx.fill();
            // movePictures();
        }
        var angle = 0;	
        //move flakes
        function movePictures(){
            angle += 0.01;
            for(var i = 0; i < mp; i++){
                var f = flakes[i];
                f.y += Math.pow(f.d, 2) + 1;
                f.x += Math.sin(angle)*2;
                    
                if(f.y > H){
                    flakes[i] = {x: Math.random()*W, y: 0, r: f.r, d: f.d};
                }
            }
        }	
        myTimer = setInterval(drawPictures, 1000);
    };
};

<!DOCTYPE html>
<html>
    <head>
        <script src="snow.js"></script>
        <!--<script src="picture-fall.js"></script>-->
         </script>
        <style>
            body {
                background: #102a54;
            }
        </style>        
    </head>
    <body>
        <form>
            <input id="vel" type="text" value="1">
            <input id="dens" type="text" value="7">
            <input id="button" type="button" value="Fall!">
        </form>
        <canvas id="sky"></canvas>

    </body>
</html>

另外，为什么如果我更改速度输入，它实际上什么都不做？

Answer 1

可能的原因可能是，您正在为每个片状对象创建和加载图像，而您不需要这样做。只需创建一次图像对象，然后在画布上绘制，并使用片状对象坐标。

尝试以下更改：

    var base_image = new Image();
    base_image.src = 'http://www.clipartkid.com/images/842/image-frozen-elsas-snowflake-png-disney-wiki-bSYAsR-clipart.png';
    //draw flakes
    function drawFlakes(){
        ctx.clearRect(0, 0, W, H);
        ctx.fillStyle = "White";
        ctx.beginPath();
        for(var i = 0; i < mf; i++){
            var f = flakes[i];
            // ctx.moveTo(f.x, f.y);
            // ctx.arc(f.x, f.y, f.r, 0, Math.PI*2, true);              
            ctx.drawImage(base_image, f.x, f.y, f.r + 50, f.r + 50);    
        }
        ctx.fill();
        moveFlakes();
    }

替换您的图片

JavaScript，1图片而不是很多

1 个答案: