jquery - javascript - Using ctx.drawImage to show image inside an array of objects -
it not show image, tried in possible ways cannot figure out how. how should :
1) how create new object object('20','x',250,100,'img'); , specify picture want use it? img.player or img.player.src or img? 2) how iterate through objectarray displaying them in canvas?
15index.html: 38 uncaught typeerror: failed execute 'drawimage' on 'canvasrenderingcontext2d': provided value not of type '(htmlimageelement or htmlvideoelement or htmlcanvaselement or imagebitmap)'<!doctype html> <html lang="en"> <head> <title></title> </head> <body> <canvas id="ctx" width="500" height="500" style="border:1px solid #000000;"></canvas> <script> var width = 500; var height = 500; var ctx = document.getelementbyid("ctx").getcontext("2d"); ctx.font = '30px arial'; var img = {}; img.player = new image(); img.player.src = "firemonster.png" var objectarray = {}; function object(id, name, x, y, img) { var object3 = { x: x, y: y, name: name, id: id, img: img, }; objectarray[id] = object3; } object('20', 'x', 250, 100, 'img'); object('21', 'p', 150, 150, 'img'); drawingobject = function(something) { ctx.drawimage(something.img, something.x, something.y); } update = function() { (var x in objectarray) { drawingobject(objectarray[x]); } } setinterval(update, 40); </script> </body> </html>
you passing text of 'img' object function instead of image object. try instead:
object('20', 'x', 250, 100, img.player); object('21', 'p', 150, 150, img.player); 
Comments
Post a Comment