html - html5 drawing multiple canvas images -


I have problems with canvas in html. I want to attract many canvas images I have created a loop which is more than one Makes canvas and then I want to draw an image in each canvas.

For (var i = 1; i & lt; = playerStuff.MovingCards.length; i ++) {$ ("# playersField") Attachment ("& lt; canvas id = 'moving cardsfield" + I + "' height = '" + movingCardSizeY + "' \ n \ quarter = '" +++ CardSizeX +' '\ n \ data =' "+ PlayerStaff . Matting card [i-1] .movePoints + "'& gt; "); Var imgObj = new image (); Var Drafted = document.getElementById ('movingCardsField' + i) .getContext ("2D"); ImgObj.onload = function () {drawField.drawImage (imgObj, 0,0); }; ImgObj.src = "./img/moveCards/"+playerStuff.MovingCards[i-1].name; }

The result is that only the image painted in the final canvas is what I remember here?

Please do not use JQuery for this. Generally I am not a friend of JQuery, but I have personal opinion, but here you should not really use, the DOM should use it faster.

  var playersField = document.getElementById ("playersField"); Var Canvas Elements = New Array (); Var Canvas Element, Droffield, imgobj; Var Draffield = New Array (); (Var i = 0; i & lt; = playerStuff.MovingCards.length; i ++) for {canvasElement = document.createElement ("canvas"); CanvasElement.height = movingCardSizeY; CanvasElement.width = movingCardSizeX; CanvasElement.data = playerStuff.MovingCards [i-1] .movePoints; PlayersField.appendChild (canvasElement); DrawField = canvasElement.getContext ("2D"); DrawFields.push (drilled); ImgObj = new image (); ImgObj.src = "./img/moveCards/"+playerStuff.MovingCards[i-1].name; ImgObj.index = I; ImgObj.onload = function () {drawFields [this.index] .drawImage (this, 0,0); };  

Comments

Popular posts from this blog

import - Python ImportError: No module named wmi -

Editing Python Class in Shell and SQLAlchemy -

lua - HowTo create a fuel bar -