Jump to content

(JS-HTML5) - Criar várias formas dentro do mesmo canvas


Filipe_O
 Share

Recommended Posts

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 by Filipe_O
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.