Question

经过Stackoverflow和其他网站的大量研究之后，我决定创建自己的帐户并要求自己。

故事：我正在使用具有某些功能的HTML 5 Canvas创建一个Drawing应用程序，以帮助用户了解如何在视线中绘制简单图像。用户从其他用户那里学习。为了实现类似的功能，我想提供“其他人如何绘制”功能。

我的问题：我已经准备好一切。用户可以绘制图像并将其作为PNG保存到平台上，以向其他所有人提供其结论。现在，我想提供用户绘画时我的HTML 5 Canvas记录。

要实现这一点，我想使用jsgif或ccapture.js。首先，我尝试使用jsgif设置所有内容，但一切都很好，但最后我只得到了一个黑色gif。也许我用错了方向？

感谢您的想法。

问候Aytee。

canvas = document.createElement('canvas');
    canvas.setAttribute('width', this.element_base.width());
    canvas.setAttribute('height', this.element_base.height());
    canvas.setAttribute('id', 'canvas');
    this.element_base.append(canvas);

    if(typeof G_vmlCanvasManager != 'undefined') {
        canvas = G_vmlCanvasManager.initElement(canvas);
    }

    context = canvas.getContext("2d");
    encoder = new GIFEncoder();
    encoder.setRepeat(0);
    encoder.setDelay(500);

    // Enable Drawing
    var clickX = new Array();
    var clickY = new Array();
    var clickDrag = new Array();
    var clickColor = new Array();
    var myColor = "black";
    var paint;
    var contextCollection = new Array();

    function addClick(x, y, dragging)
    {
        clickX.push(x);
        clickY.push(y);
        clickDrag.push(dragging);
        clickColor.push(myColor);
    }

    $('#canvas').mousedown(function(e){
        var mouseX = e.pageX - this.offsetLeft;
        var mouseY = e.pageY - this.offsetTop;

        paint = true;
        encoder.start();
        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
        redraw();
    });

    $('#canvas').mousemove(function(e){
        if(paint){
            addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
            redraw();
        }
    });

    $('#canvas').mouseleave(function(e){
        paint = false;
    });

    $('#canvas').mouseup(function(){
        paint = false;
        encoder.addFrame(contextCollection, false);
        encoder.finish();
    });

    function redraw(){
        context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

        context.lineJoin = "round";
        context.lineWidth = 5;
        context.fillStyle = "#fff";

        for(var i=0; i < clickX.length; i++) {
            context.beginPath();
            if(clickDrag[i] && i){
                context.moveTo(clickX[i-1], clickY[i-1]);
            }else{
                context.moveTo(clickX[i]-1, clickY[i]);
            }
            context.lineTo(clickX[i], clickY[i]);
            context.closePath();
            context.strokeStyle = clickColor[i];
            context.stroke();
        }

        contextCollection.push(context);

    }

    //save gif

    $('.submitImage').click(function(e){
        e.preventDefault();
        encoder.finish();
        encoder.download("image.gif");
    });


    // Change Color
    $(".circle").each(function(){
        $(this).click(function(){
            myColor = $(this).attr("class").split(" ")[1];
        });

将HTML 5画布图形记录为GIF动画

0 个答案: