多次提交图像到html5画布 [英] submit image multiple times to html5 canvas

问题描述

我试图在html5画布上的不同位置多次显示图像，但不知道如何去做。我可以轻松地绘制一个图像，但必须找到如何做1次以上。任何人都可以帮助我。





我做错了什么因为它只在画布上打印一张图片。

I am trying to display a image multiple times at different locations on a html5 canvas and don't know how to go about doing it. I can draw one image easily but have to find how to do it more than 1 times. Can anyone help me.


what am I doing wrong because it only prints one image on the canvas.

function imageloader() 
{
	//Getting ID's
    imagehtml5canvas = document.getElementById('imagehtml5canvas');
    imagecanvasarea = imagehtml5canvas.getContext("2d");

	xposition = Math.random();
	yposition = Math.random();
	nImages=20;
	
	var CanvasImage = new Image();
	CanvasImage.src = "images/monalisa.jpg"; 		
     CanvasImage.onload = function() {

	
	for(var i=0;i<nImages;i++){
				imagecanvasarea.drawImage(CanvasImage,xposition,yposition,50,50);
		}
    };	  
}

推荐答案

看起来好像是因为你计算了一次随机数，并使用相同的计算结果整个图像的数字。除此之外， Math.random 函数给出的数字介于0到1之间。因此，为了获得在不同的位置，您可以将随机结果与某个值相乘。

It seems like it happens because you calculate the random number once and, use the same calculated numbers for the whole of the images. In addition to that, the Math.random function gives a number between 0 to 1. So, in order to get different locations, you can multiply the random results with some value.

尝试计算循环内的随机位置。类似于：

Try to calculate the random location inside the loop. Something like:

for(var i=0;i<nImages;i++){
    xposition = Math.random() * 100;
    yposition = Math.random() * 100;
    imagecanvasarea.drawImage(CanvasImage,xposition,yposition,50,50);
}

这篇关于多次提交图像到html5画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！