Jump to content
Sign in to follow this  
Filipe_O

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

Recommended Posts

Filipe_O

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

Share this post


Link to post
Share on other sites
HappyHippyHippo

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

Share this post


Link to post
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
Sign in to follow this  

×
×
  • 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.