javascript - html5 从 Canvas 中删除

Question

这是我的第一个 html5 项目，正在了解它的要点，需要一些帮助。我使用 jquery UI slider 将不透明度值发送到 Canvas ，效果非常好...但是当 slider 处于关闭位置且值为零时，我无法使图像完全关闭。这是我想做的事情:http://jsfiddle.net/N6wZZ/2/

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

}

如您所见，我已经采取了一系列解决方法来关闭第二张图像或将其从 Canvas 中删除。任何帮助都是极好的。

Answer 1

塞拉斯。我查看了你的 jsFiddle。我 fork 了它并对您的方法进行了一些更改/改进，我认为它实现了您的目标:

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

这是我采取的方法(与您的方法非常接近，只有一些细微的差别):

1. 加载我们的第一张图片
2. 在第一个图像的 onLoad 函数中加载第二个图像
3. 在第二张图片的 onLoad 函数中创建 slider
4. slider 的创建和更新方法都会调用 refreshVisuals 函数，该函数会更新 slider div 的值并更新 Canvas

主要区别在于 draw 函数，在您的示例中称为 canvasFunction。在我的 draw 函数中，我确保:

1. 每次绘制时清除 Canvas
2. 当我们用树绘制第一张图像时，确保 alpha 为 1
3. 绘制 TreeMap 像
4. 将 Alpha 值更新为 slider 的当前值
5. 绘制我们的领带图像

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