小编Tod*_*ick的帖子

我正在创建一个演练视频,用户可以在屏幕上滑动UI滑块,相机将穿过3D空间.

视频已导出为jpg帧,编号为0到350.jpg.

我首先预先加载所有帧,然后将该函数应用于滑块更改.

这是画布

<canvas id="walkthrough" width="1280" height="300"></canvas>

这是应用data.value的jQuery UI滑块中的函数

$("[data-slider]")
.each(function () {
  var input = $(this);
  $("<span>")
    .addClass("output")
    .insertAfter($(this));
})
.bind("slider:ready slider:changed", function (event, data) {
  $(this)
    .nextAll(".output:first")
      .html(data.value.toFixed(3));
});

这是图像预载功能

var totalImages = 50; // Wow, so many images for such a short clip
var images = new Array();
for(var i = 1; i < totalImages; i++) {
    var filename = '/walkthrough/' + i + '.jpg'; // Filename of each image
    var img = new Image;
    img.src …