以動畫形式記錄畫布圖形.GIF

Question

我正試圖在畫布上記錄圖形的GIF。我使用這個庫https://github.com/antimatter15/jsgif保存帆布輸出.gif動畫

對於我使用的是純JS畫布繪製腳本概念證明 - http://zipso.net/sketchpad/sketchpad-lines.html

下面你可以找到初始化函數 - 我得到一個黑色圖像，並不能添加新的幀到gif。我怎樣才能解決這個問題？任何意見讚賞。

function init() { 
    // Get the specific canvas element from the HTML document 
    canvas = document.getElementById('sketchpad'); 

    // If the browser supports the canvas tag, get the 2d drawing context for this canvas 
    if (canvas.getContext) 
     ctx = canvas.getContext('2d'); 

     var encoder = new GIFEncoder(); 
     encoder.setRepeat(0); 
     encoder.setDelay(100); //go to next frame every n milliseconds 
     encoder.start(); 


    // Check that we have a valid context to draw on/with before adding event handlers 
    if (ctx) { 



     // React to mouse events on the canvas, and mouseup on the entire document 
     canvas.addEventListener('mousedown', sketchpad_mouseDown, false); 
     canvas.addEventListener('mousemove', sketchpad_mouseMove, false); 
     window.addEventListener('mouseup', sketchpad_mouseUp, false); 

     // React to touch events on the canvas 
     canvas.addEventListener('touchstart', sketchpad_touchStart, false); 
     canvas.addEventListener('touchend', sketchpad_touchEnd, false); 
     canvas.addEventListener('touchmove', sketchpad_touchMove, false); 
    } 




     encoder.addFrame(ctx); 
     encoder.finish(); 


    document.getElementById('image').src = 'data:image/gif;base64,'+encode64(encoder.stream().getData()) 
} 

Answer 1

你需要讓事件在那裏做的事，你當你調用完成，爲此你會得到一個黑色的圖像沒有任何畫在畫布上。

邏輯應遵循

Start/Setup function(){ 
    setUp Canvas 
    addEvent handlers 
    setup encoder. 
    return // You must exit or the event handlers will not fire 
} 

Event Handlers(){ 
    for each event 
    render to canvas 
    encoder.addFrame(); // adds the new frame 
} 

Save Function(){ // when you have added what you want then you can call finish 
    encoder.finish() 
    download. 
}