Javascript html5从画布中移除

这是我的第一个html5项目，了解它的要点，需要一些帮助。我使用jQueryUI滑块将不透明度值发送到画布，效果非常好。。。但是当滑块处于关闭位置且值为零时，我无法使图像完全关闭。以下是我正在尝试做的一些事情：

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

}

---

正如你所看到的，我已经做了一系列的变通方法来关闭第二个图像，或者干脆把它从画布上去掉。任何帮助都会很棒

Silas。我已经看过你的JSFIDLE了。我对您的方法进行了一些更改/改进，我认为它实现了您的目标：

以下是我采用的方法（与您的方法非常接近，只是一些细微的差异）：

加载我们的第一个图像

在第一个图像的onLoad函数中加载第二个图像

在第二幅图像的onLoad函数中创建我们的滑块

滑块的创建和更新方法都调用

refreshVisuals

函数，该函数更新滑块div的值并更新画布

主要区别在于

draw

函数，在您的示例中，该函数被称为

canvasFunction

。在我的

draw

功能中，我确保：

每次画画时都要清理画布

当我们用树绘制第一幅图像时，确保alpha为1

绘制树的图像

将alpha更新为滑块的当前值

画我们的领带图案

---

应该是这样！如果您有任何问题，请告诉我。

塞拉斯。我已经看过你的JSFIDLE了。我对您的方法进行了一些更改/改进，我认为它实现了您的目标：

以下是我采用的方法（与您的方法非常接近，只是一些细微的差异）：

加载我们的第一个图像

在第一个图像的onLoad函数中加载第二个图像

在第二幅图像的onLoad函数中创建我们的滑块

滑块的创建和更新方法都调用

refreshVisuals

函数，该函数更新滑块div的值并更新画布

主要区别在于

draw

函数，在您的示例中，该函数被称为

canvasFunction

。在我的

draw

功能中，我确保：

每次画画时都要清理画布

当我们用树绘制第一幅图像时，确保alpha为1

绘制树的图像

将alpha更新为滑块的当前值

画我们的领带图案

---

应该是这样！如果您有任何问题，请告诉我。

当您第一次绘制画布时，workAroundVar 1和2设置为什么？我看到它们是空的。这是因为代码的整体逻辑是错误的。不要每次滑块移动时都加载图像，加载一次，然后重新绘制画布。摆脱你的变通方法变量。它们也错了。@akonsu但加载图像是重画的，对吗？我不确定浏览器（至少不是所有浏览器）是否会为已经加载并在浏览器缓存中的图像调用onload事件处理程序。正确，但最近我在画布上做了很多像素级的工作，从我的研究中我发现，每当我应用像素级操作时，我必须在画布上应用效果，并在画布上重新绘制图像！我也在这里发布了一些问题，您可以从我的个人资料中查看。当您第一次绘制画布时，workAroundVar 1和2设置为什么？我看到它们是空的。这是因为代码的整体逻辑是错误的。不要每次滑块移动时都加载图像，加载一次，然后重新绘制画布。摆脱你的变通方法变量。它们也错了。@akonsu但加载图像是重画的，对吗？我不确定浏览器（至少不是所有浏览器）是否会为已经加载并在浏览器缓存中的图像调用onload事件处理程序。正确，但最近我在画布上做了很多像素级的工作，从我的研究中我发现，每当我应用像素级操作时，我必须在画布上应用效果，并在画布上重新绘制图像！我也在这里发布了一些问题，你可以从我的个人资料中查看。