Question

我不知道如何添加本地存储以保存在画布上绘制的图形，因此当重新加载页面时，现有图形将通过本地storafe加载到画布上。我没有经验，所以如果有人可以使用本地存储添加编辑我的代码，我将不胜感激。非常感谢提前！

这是我的JS：

var canvas, ctx,
    brush = {
        x: 0,
        y: 0,
        color: '#000000',
        size: 10,
        down: false,
    },
    strokes = [],
    currentStroke = null;

function redraw () {
    ctx.clearRect(0, 0, canvas.width(), canvas.height());
    ctx.lineCap = 'round';
    for (var i = 0; i < strokes.length; i++) {
        var s =strokes[i];
        ctx.strokeStyle = s.color;
        ctx.lineWidth = s.size;
        ctx.beginPath();
        ctx.moveTo(s.points[0].x, s.points[0].y);
        for (var j = 0; j < s.points.length; j++){
            var p = s.points[j];
            ctx.lineTo(p.x, p.y);
        }
        ctx.stroke();
    }

}
function init () {
    canvas = $('#draw');
    canvas.attr({
        width: window.innerWidth,
        height: window.innerHeight,
    });
    ctx = canvas[0].getContext('2d');


    function mouseEvent (e){
                brush.x = e.pageX;
        brush.y = e.pageY;

        currentStroke.points.push({
            x: brush.x,
            y: brush.y,

        });



        redraw();
    }
    canvas.mousedown(function (e){
        brush.down = true;

        currentStroke = {
            color: brush.color,
            size: brush.size,
            points: [],
        };
        strokes.push(currentStroke);

        mouseEvent(e);
    }) .mouseup(function (e) {
        brush.down = false;

        mouseEvent(e);

        currentStroke = null;
    }) .mousemove(function (e) {
        if (brush.down)
            mouseEvent(e);
    });

    $('#save-btn').click(function () {
        window.open(canvas[0].toDataURL());
    });
    $('#undo-btn').click(function (){
        strokes.pop();
        redraw();
    });
    $('#clear-btn').click(function (){
        strokes = [];
        redraw();
    });

    $('#color-picker').on('input', function () {
        brush.color = this.value;
    });
    $('#brush-size').on('input', function () {
        brush.size = this.value;
    });
    }
$(init);

Answer 1

使用Canvas.js帮助程序，您只需执行以下操作：

const canvas = new Canvas( 'my-canvas' );
canvas.saveToStorage( 'balls' );

，其中

my-canvas是画布ID
balls是将键保存为

键

要稍后恢复画布状态：

const canvas = new Canvas( 'my-canvas' );
canvas.restoreFromStorage( 'balls' );

加载Canvas.js：

<script type="text/javascript" src="https://gustavgenberg.github.io/handy-front-end/Canvas.js">

修改

在阅读了以下文章后（谢谢你@Shashank），我已经用完整的代码制作了一个jsfiddle以实现连续绘图。它会自动保存mouseup上的最后一个笔划并在刷新时加载它。看看吧！

它使用Canvas.js和Pointer.js：

https://jsfiddle.net/wk5ttqa2/

编辑2

只是为了好玩......这真的很简单：

https://jsfiddle.net/GustavGenberg/1929f15t/1/

请注意，快速移动时不会绘制完整的线条（取决于帧速率）......

Answer 2

Canvas.js会将画布作为图像保存到localStorage，这对您的情况没有帮助，因为您将鼠标事件存储在数组中。

如果您正在寻找一个可以继续绘制画布以及恢复旧（已保存）元素的解决方案，那么您需要的是存储画布元素（strokes数组你的情况）在localStorage和恢复，重绘画布。

这是一个演示：

JS FIDDLE DEMO

在画布上画任何东西。
点击＆＃34;保存到本地存储＆＃34;底部的按钮。
刷新页面。

要清除localStorage，请清除浏览器缓存。

相关代码更改：

在HTML中添加了一个按钮以保存到本地存储

<button id="save-to-local-storage">
   Save to local storage
</button>

将strokes数组保存到上面的localStorage按钮上。

$('#save-to-local-storage').click(function () {
  localStorage.setItem('canvas_strokes', JSON.stringify(strokes)); 
});

在页面刷新上，检查localStorage是否设置了项目，如果是，则重绘画布：

// check if localstorage has an array of strokes saved 
if(localStorage.getItem('canvas_strokes')) { 
   strokes = JSON.parse(localStorage.getItem('canvas_strokes'));
   redraw();
}

如果您有任何疑问，请与我们联系。希望这可以帮助。：）

添加本地存储以保存画布图

2 个答案: