Javascript 带有jquery ui滑块的Html5画布

我第一次使用html5，试图让这个jquery ui滑块向这个html5画布发送正确的值。经过一些谷歌搜索和搞乱之后，我在这里工作了：当你使用它时，你会看到我的意思，直到滑块移动后才出现图像，我知道这与我的函数顺序有关，我只是无法让它工作，其他的，我的代码如下： JS:

---

当滑块一直向左时，任何关于如何使第二个图像完全取消的帮助都将非常棒。。。如果有人能帮我将初始图像加载到画布onload上，那也太棒了。

您使用的滑动方法只有在滑块实际调整时才被调用。jQueryUI Slider对象还提供了一个在页面加载时创建滑块时调用一次的

---

我建议使用它来执行画布的初始设置。e、 g.加载画布图像等。

只有在实际调整滑块时才会调用您正在使用的滑动方法。jQueryUI Slider对象还提供了一个在页面加载时创建滑块时调用一次的

---

我建议使用它来执行画布的初始设置。e、 g.加载画布图像等。

顺便说一句，这是我第一次涉足html5，如果对画布的调用不正确，或者我正在以错误的方式进行操作，请随意更改整个内容。顺便说一句，这是我第一次涉足html5，如果画布调用不正确，或者我正在以错误的方式进行操作，请随意更改整个内容。感谢您花时间回答此问题，现在查看创建方法。感谢您花时间回答此问题，现在查看创建方法。

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

});