如何使用此插件为画布设置动画

时间:2017-05-31 10:25:13

标签: javascript html canvas

我仍然是这种类型的编程的新手,我试图创建kaledoscope类型的效果投影在屏幕上。我想让图像移动到效果的每个部分。有没有办法移动它?我似乎无法瞄准插件创建的画布。

https://codepen.io/muspelheim/pen/gpymF

     var images = [
  "http://media-cache-ak0.pinimg.com/736x/5d/d8/41/5dd8416cbae27edeac61aa525a5df99d.jpg",
  "https://1.bp.blogspot.com/-FpxaoVBBxXs/T5aWaP2dMDI/AAAAAAAAAw8/qdaPYyuqSt8/s1600/spugnaepicinfame.jpg",
  "https://25.media.tumblr.com/tumblr_m9ls7nRTuR1rvqbato1_1280.jpg",
  "https://3.bp.blogspot.com/-SJAKrZTcqwI/T5kwYk71YCI/AAAAAAAAAxE/HNlX3i2-xwk/s1600/spugnabimbofango.jpg"
];


// Let's create graphemescope object inside the container
var container = $("#container");
var scope = new Graphemescope( container[0] );


var index = 0;
function changePicture() {
    scope.setImage(images[index]);  
    index = (index + 1) % images.length;
};

setInterval(changePicture, 2000);
changePicture();

$(window).mousemove(function(event) {
  var factorx = event.pageX / $(window).width();
  var factory = event.pageY / $(window).height()

  // This will move kaleidoscope
  scope.angleTarget = factorx;
  scope.zoomTarget  = 1.0 + 0.5 * factory;
});


var resizeHandler = function() {
  container.height( $(window).height() );
  container.width( $(window).width() );
};

$(window).resize(resizeHandler);
$(window).resize();

container.click(changePicture);

0 个答案:

没有答案