Filipe_O Posted January 26, 2016 at 09:12 AM Report Share #592528 Posted January 26, 2016 at 09:12 AM (edited) Mekie pessoal! Para uma cadeira da faculdade tenho de fazer uma animação em Javascript e HTML5 e eu pensei em criar uma página com vários botões, cada um com um fundo diferente. Posto isso, tenho este código no script: var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var posicaoX = 100; var posicaoY = 100; var pos_des_X = 50; var pos_des_Y = 80; for(i = 0; i < 3; i++){ ctx.arc(posicaoX, posicaoY, 60, 0, Math.PI*2,true); // you can use any shape ctx.fill(); var img = new Image(); img.addEventListener('load', function() { ctx.drawImage(img, pos_des_X, pos_des_Y); }, true); pos_des_Y += 100; posicaoY += 100; switch (i) { case 0: img.src = "ChetFaker_mini.jpg"; alert("opcao 1"); break; case 1: img.src = "D_P_mini.jpg"; alert("opcao 2"); break; } } Portanto, crio os diferentes círculos com o for e dependendo do ciclo do for, assim é o fundo do botão. A consola gera-me os círculos mas não me atribui os diferentes fundos. Já fiz debug e o switch está a funcionar. E o fundo, definido antes do switch, também funciona. De alguma maneira, ele não me assume a atribuição dentro do switch. Soube que a solução para atribuir o fundo aos círculos passa pelo atributo "clip" mas não me funciona. Sabem-me ajudar? Obrigado Edited January 26, 2016 at 09:31 AM by Filipe_O Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted January 26, 2016 at 09:55 AM Report Share #592531 Posted January 26, 2016 at 09:55 AM o "loading" das imagem é feita de uma forma assincrona. isto quer dizer que apesar de teres o código para carregar as imagem elas (de certeza) só irão "chegar" ao browser depois desse código todo. o que terás de fazer é só efetuar o código de desenho depois de confirmares que a imagem já chegou dá aqui uma vista de olhos http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/ function loadImages(sources, callback) { var images = {}; var loadedImages = 0; var numImages = 0; // get num of sources for(var src in sources) { numImages++; } for(var src in sources) { images[src] = new Image(); images[src].onload = function() { if(++loadedImages >= numImages) { callback(images); } }; images[src].src = sources[src]; } } var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var sources = { darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg', yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg' }; loadImages(sources, function(images) { //.................................................................................. // código que só irá ser executado após as imagens serem carregadas //.................................................................................. context.drawImage(images.darthVader, 100, 30, 200, 137); context.drawImage(images.yoda, 350, 55, 93, 104); }); IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now