html5 enlever de la toile

Question

Ceci est mon premier projet html5, obtenir l'essentiel de celui-ci, besoin d'un peu d'aide. J'ai utilisé un curseur d'interface utilisateur jquery pour envoyer une valeur d'opacité au canevas et cela fonctionne plutôt bien ... mais je n'arrive pas à désactiver complètement l'image lorsque le curseur est en position d'arrêt avec la valeur zéro. Voici un violon de ce que je suis en train de faire: http://jsfiddle.net/N6wZZ/2/

Voici mes JS:

$("#slider").slider({ 
    animate: true, 
    range: "min", 
    value: 0, 
    min: 0, 
    max: 0.9, 
    step: .01, 
    create: function (event, ui) { 
     var opacityValue = '0.0'; 
     canvasFunction(opacityValue); 
    }, 
    slide: function (event, ui) { 
     $('#hiddenField').attr('value', ui.value); 
     $("#slider-result").html(ui.value); 
     var opacityValue = $('#hiddenField').val(); 
     if (opacityValue == 0) { 
      var opacityValue = 0; 
      var workAroundVar = 300; 
      var workAroundVarTwo = 0; 
      canvasFunction(opacityValue, workAroundVar, workAroundVarTwo); 
     } 
     else { 
      var workAroundVar = 0; 
      var workAroundVarTwo = 300; 
      canvasFunction(opacityValue, workAroundVar, workAroundVarTwo); 
     } 
    }  
}); 
function canvasFunction(opacityValue, workAroundVar, workAroundVarTwo){ 
    var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d"); 
    var img1 = loadImage('http://moosepic.com/test2.png', main); 
    var img2 = loadImage('http://moosepic.com/test.png', main); 


    var imagesLoaded = 0; 

    function main() { 
     imagesLoaded += 1; 

     if (imagesLoaded == 2) { 
     // composite now 
     ctx.drawImage(img1, 0, 0, 300, 300); 

      ctx.globalAlpha = opacityValue; 
      ctx.drawImage(img2, workAroundVar, workAroundVar, workAroundVarTwo, workAroundVarTwo); 

     } 
    } 

    function loadImage(src, onload) { 
     var img = new Image(); 

     img.onload = onload; 
     img.src = src; 

     return img; 
    } 

} 

comme vous pouvez le voir, je l'ai fait un tas de solutions de contournement pour désactiver la deuxième image ou tout simplement assommez-le de la toile. Toute aide serait géniale.

Answer 1

Silas. J'ai jeté un oeil à votre jsFiddle. Je l'ai bifurqué et apporté quelques modifications/améliorations à votre approche et je pense qu'il accomplit votre objectif:

http://jsfiddle.net/3LJsX/7/

Voici l'approche que je pris (ce qui est assez proche de la vôtre, seulement quelques différences mineures):

1. Charger notre première image
2. Charger notre deuxième image dans la fonction onLoad de la première image
3. Créer notre curseur dans la fonction onLoad de la seconde image
4. créer et mettre à jour des méthodes à la fois appeler la fonction de refreshVisuals Le curseur qui met à jour la valeur de la div curseur et met à jour la toile

Une différence principale est dans la fonction draw qui a été appelé canvasFunction dans votre exemple. Dans ma fonction draw, je veille à:

1. Effacer la toile chaque fois que nous tirons
2. Assurez-vous que l'alpha est à 1 quand nous tirons notre première image avec l'arbre
3. Dessiner l'image de l'arbre
4. Mise à jour alpha pour être quelle que soit la valeur actuelle est pour le curseur
5. puisons notre image tiedie

cela devrait suffire! Faites moi savoir si vous avez des questions.