HTML5 canvas, à l'échelle de l'image après le dessin

Je suis en train de mettre à l'échelle une image qui a déjà été mises en toile.
C'est le code:

      var canvas = document.getElementById('splash-container');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        //draw image at its original size
        context.drawImage(imageObj, 0, 0);
      };
      imageObj.src = 'images/mine.jpeg';


        //Now let's scale the image.
        //something like...
        imageObj.scale(0.3, 0.3);

Comment dois-je faire?

OriginalL'auteur Mich Dart | 2012-12-16

  1. 20

    Vous êtes en train de penser à propos de ce mal. Une fois que vous avez tiré l'image sur le canvas il n'a pas de relation à la imageObj objet. Rien que vous faire pour imageObj affectera ce qui est déjà établi. Si vous souhaitez mettre à l'échelle l'image, faire dans le drawImage function:

    drawImage(imgObj, 0, 0, imgObj.width * 0.3, imgObj.height * 0.3)

    Si vous souhaitez animer la mise à l'échelle ou sont à la recherche pour obtenir un autre effet qui vous oblige à dessiner l'image en pleine taille au départ, vous devez d'abord clair c' avant de dessiner à l'échelle vers le bas de l'image.

    J'ai trouvé une solution à l'aide de la Cinétique de la bibliothèque et transitionTo() la méthode

    OriginalL'auteur robertc

  2. 3

    Ce robertc dit est correct, mais si vous avez vraiment voulu mettre à l'échelle une image sur une toile après dessin pour une raison quelconque, vous avez juste à l'échelle de l'ensemble de la toile à l'aide de la CSS largeur/hauteur propriétés et qui serait à l'échelle de l'image sans avoir à les redessiner.

    Eh bien, je ne peux pas l'échelle de l'ensemble de la toile parce qu'il y a d'autres objets, que je ne veux pas à l'échelle. Je veux faire apparaître un logo sur un écran de démarrage qui doit tourner et lui-même à sa taille d'origine.
    Merci de votre réponse a été utile pour moi !!

    OriginalL'auteur hobberwickey