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从画布中删除

回答

相关问题