Html5畫布與jQuery的UI滑塊

我第一次與HTML5，試圖讓這個jQuery UI滑塊發送正確的值到這個HTML5畫布的不透明度。經過一些Google搜索和混亂之後，我在這裏工作：http://jsfiddle.net/y54Es/25/當您使用它時，您會看到我的意思，直到滑塊移動後纔會出現圖像，我知道這與我擁有的順序有關在，我只是不能得到它反正別的工作職能，這裏是我下面的代碼： JS：Html5畫布與jQuery的UI滑塊

$("#slider").slider({ 
    animate: true, 
    range: "min", 
    value: 0.5, 
    min: 0, 
    max: 0.9, 
    step: .01, 

    slide: function (event, ui) { 
    $('#hiddenField').attr('value', ui.value); 
    $("#slider-result").html(ui.value); 
    var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d"); 
    var valueVar = $('#hiddenField').val(); 
    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); 
     if (valueVar == 0) { 

     } else { 
      ctx.globalAlpha = valueVar; 
      ctx.drawImage(img2, 0, 0, 300, 300); 
     } 
     } 
    } 

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

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

     return img; 
    } 
    } 

});

如何使第二圖像完全抵消當滑塊是一路的任何幫助左邊會很棒......如果有人可以幫我把初始圖像加載到畫布上，那也太棒了。

來源

2013-01-16 user1053263

順便說一下，這是我第一次甚至涉足html5，如果錯誤地調用畫布或正在做我錯誤的方式，隨時改變整個事情。 – user1053263

您正在使用的幻燈片方法僅在實際調整滑塊時調用。 jQueryUI Slider對象還提供一個create method，在頁面加載時創建滑塊時調用該對象。

我建議使用它來執行畫布的初始設置。例如加載畫布圖像等

來源

2013-01-16 12:01:00 RayViljoen

感謝您花時間回答這個問題，現在查看創建方法。 – user1053263

Html5畫布與jQuery的UI滑塊

回答

相關問題