2017-04-05 139 views
1

我想在去jQuery之前瞭解javascript,並且製作了一個簡單的圖像滑塊。javascript圖像滑塊啓動

我結束了下面的代碼工作良好,當我手動啓動它的瀏覽器控制檯上,我無法弄清楚如何啓動它,如果用承諾會做,以及如何。

減少代碼:

/*some variable declarations and value assignations*/ 
function cut(p1){ 
    for (var i = 0; i < cuts; i++){ 
     /*canvas working with path pattern and fill*/ 
     slice[p1][i] = new Image(); 
     slice[p1][i].src = canvas.toDataURL(); 
    } 
} 
function slider(){ 
    /*time based image selection and canvas clear*/ 
    for (var i = 0; i < 10; i++){ 
     y = /*timebased calc*/; 
     if(y<0){y=0;} 
     ctx.drawImage(slice[im][i], 0, y); 
    } 
    window.requestAnimationFrame(slider); 
} 
img[0].onload = function() {cut(0);}; 
img[1].onload = function() {cut(1);}; 

全碼:

var height = 500, width = 707, cuts = 10, cW = Math.ceil(width/cuts); 
var img = [new Image(), new Image()]; 
var slice = []; 
for (var i = 0; i < img.length; i++){ 
    slice[i] = []; 
} 
var x = []; 
for (var i=0; i<cuts; i++){ 
    x[i]=Math.ceil(((i+1)*width)/cuts); 
} 
function cut(p1){ 
    for (var i = 0; i < cuts; i++){ 
     var canvas = document.createElement('canvas'); 
     canvas.width = width; 
     canvas.height = height; 
     var context = canvas.getContext('2d'); 
     var pat = context.createPattern(img[p1], 'no-repeat'); 
     context.fillStyle = pat; 
     context.beginPath(); 
     context.moveTo(x[i], 0); 
     context.lineTo(x[i], height); 
     context.lineTo(x[i]-cW, height); 
     context.lineTo(x[i]-cW, 0); 
     context.closePath(); 
     context.fill(); 
     slice[p1][i] = new Image(); 
     slice[p1][i].src = canvas.toDataURL(); 
    } 
} 
var canv = document.createElement('canvas'); 
document.body.appendChild(canv); 
canv.width = width; 
canv.height = height; 
var ctx = canv.getContext('2d'); 
var sTime= 0; 
function slider(){ 
    var t = (performance.now() - sTime) % 10000; 
    if(t%5000 === 2000){ 
     ctx.clear(); 
    } 
    var im = 0; 
    if(t >= 5000){ 
     im = 1; 
    } else { 
     im = 0; 
    } 
    for (var i = 0; i < 10; i++){ 
     t = t%5000; 
     y = 2000-((t)+(i*100)); 
     if(y<0){y=0;} 
     ctx.drawImage(slice[im][i], 0, y); 
    } 
    window.requestAnimationFrame(slider); 
} 
CanvasRenderingContext2D.prototype.clear = function() {this.clearRect(0, 0, this.canvas.width, this.canvas.height);} 
img[0].onload = function() {cut(0);}; 
img[1].onload = function() {cut(1);}; 
img[0].src = 'mountain.jpg'; 
img[1].src = 'beach.jpg'; 
+0

你會怎麼做手動啓動它? – xDreamCoding

+0

我的意思是我寫在瀏覽器的控制檯「滑塊()」,我手動啓動。 我真正想知道的是如何在開始動畫之前確保每個'切片'都充滿了圖案。 –

+0

所以,你要兩個圖像已加載之後調用滑塊()和切工(0)和切工(1)完成了嗎? – xDreamCoding

回答

0

沒有測試過這一點,但它可能接近:

function imageLoader(imagePaths, onLoad, onFinished) { 
    var images = []; 
    var arrayLength = imagePaths.length; 

    function callback() { 
    if(--arrayLength === 0) onFinished(); 
    } 

    imagePaths.forEach(function(imagePath, index) { 
    var image = new Image(); 
    image.onload(onLoad(index, callback)); 
    image.src = imagePath; 
    images[index] = image; 
    }); 
    return images; 
} 

修改切()到:

function cut(p1, cb){ 
    //. 
    //. 
    //. 
    cb(); 
} 

更換

img[0].onload = function() {cut(0);}; 
img[1].onload = function() {cut(1);}; 
img[0].src = 'mountain.jpg'; 
img[1].src = 'beach.jpg'; 

有:

img = imageLoader(['mountain.jpg', 'beach.jpg'], cut, slider);