html5從畫布中刪除

這是我的第一個html5項目，獲得它的要點，需要一些幫助。我使用jQuery UI滑塊向畫布發送不透明度值，它的工作原理非常好......但是當滑塊處於關閉位置且值爲零時，我無法完全關閉圖像。這裏是什麼，我試圖做一個小提琴：http://jsfiddle.net/N6wZZ/2/html5從畫布中刪除

這裏是我的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; 
    } 

}

，你可以看到我做了一堆的解決方法來關閉第二圖像或只是把它從畫布上敲下來。任何幫助都是極好的。

來源

2013-01-17 Silas

當您第一次繪製畫布時，workAroundVar 1和2設置爲什麼？我看到它們是空白的。 –

這是因爲您的代碼的整體邏輯錯誤。每次滑塊移動時不要加載圖像，加載一次，然後重新繪製畫布。擺脫您的解決方法變量。他們也錯了。 – akonsu

@akonsu但加載圖像重繪權？ –

Silas。我看過你的jsFiddle。我分叉，並作了一些修改/改善你的方法，我認爲它實現了自己的目標：

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

這裏是我採取的方法（這是非常接近你的，只是一些細微的差別）：

載入我們的第一個圖像
載入我們的第二圖像中的第一圖像的onLoad功能
在第二圖像的onLoad函數來創建我們的滑塊
滑塊的創建和更新方法都調用了refreshVisuals功能，更新滑塊div的值，並更新帆布

的主要區別是在draw功能，在你的榜樣叫canvasFunction。在我draw功能，我一定要：

清除畫布，每次我們得出
確保阿爾法爲1的時候，我們把我們的第一個圖像與樹
繪製樹圖像
更新阿爾法是無論電流值滑塊
引起我們tiedie圖像

這應該是它！如果您有任何問題，請告訴我。

來源

2013-01-17 07:09:43 pjdanfor

這是有道理的，非常感謝你！ – Silas

html5從畫布中刪除

回答

相關問題