1

我第一次使用 html5，试图让这个 jquery ui 滑块向这个 html5 画布不透明度发送正确的值。经过一些谷歌搜索和混乱，我在这里工作：http: //jsfiddle.net/y54Es/25/当你使用它时，你会明白我的意思，在滑块移动之前没有图像出现，我知道这与我拥有函数的顺序有关，否则我就是无法让它工作，这是我的代码：JS：

    $("#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;
    }
  }

});

当滑块一直向左时如何使第二张图像完全取消的任何帮助都会很棒......如果有人可以帮助我将初始图像加载到画布上加载，那也很棒。

4

1 回答 1

1

您使用的 slide 方法仅在实际调整滑块时调用。jQueryUI Slider 对象还提供了一个create 方法，该方法在页面加载时创建滑块时调用一次。

我建议使用它来执行画布的初始设置。例如加载画布图像等。

于 2013-01-16T12:01:00.973 回答