Quantcast
Channel: Tópicos
Viewing all articles
Browse latest Browse all 14700

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

$
0
0
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:
Código :
     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

Viewing all articles
Browse latest Browse all 14700