0

所以我想创建一个绘图应用程序，我做到了，我能够更改画笔大小和画笔颜色，但是，我想保存我绘制的内容，包括画笔大小和画笔颜色。我现在可以存储我在画布上绘制的点，但不能存储画笔的大小和颜色。

 var canvas;
 var context;
 var color = "black";
 var brushSize = 13;
 var mouseDown = false;


window.onload = function init() {
//Brush Size
var bigBrushSize        = document.getElementById("bigBrush");
bigBrushSize.onclick    = handleBigBrushclicked;

var mediumBrushSize     = document.getElementById("mediumBrush");
mediumBrushSize.onclick = handleMediumBrushclicked;

var smallBrushSize      = document.getElementById("smallBrush");
smallBrushSize.onclick  = handleSmallBrushclicked;
//Brush Color
var redBrushColor       = document.getElementById("red");
redBrushColor.onclick   = handleRedBrushColorclicked;

var blueBrushColor      = document.getElementById("blue");
blueBrushColor.onclick  = handleBlueBrushColorclicked;

var yellowBrushColor    = document.getElementById("yellow");
yellowBrushColor.onclick = handleYellowBrushColorclicked;

var greenBrushColor     = document.getElementById("green");
greenBrushColor.onclick = handleGreenBrushColorclicked;
//Clear Button
var clearButton         = document.getElementById("clearButton");

clearButton.onclick     = handleClearButton;

canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
canvas.onmousedown = handleMouseDown;
canvas.onmouseup = handleMouseUp;
canvas.onmousemove = handleMouseMove;

var coords = localStorage["coords"];
if (coords) {
    coords = JSON.parse(coords);

    for (var i = 0; i < coords.length; i = i + 2) {
        paintToCanvas(coords[i], coords[i + 1]);
    }
}
}


function handleClearButton() {
context.clearRect(0, 0, canvas.width, canvas.height);

localStorage.removeItem("coords");
 }

function handleMouseDown(event) {
paintFromMouse(event);

mouseDown = true;
}

function handleMouseUp(event) {
mouseDown = false;
}

function handleMouseMove(event) {
if (mouseDown) {
    paintFromMouse(event);
}
}

// Bursh Size Start

function handleBigBrushclicked() {

brushSize = 32;

}

function handleMediumBrushclicked() {

brushSize = 16;

}

function handleSmallBrushclicked() {

brushSize = 6;

}

// Brush Size Ends

function paintFromMouse(event) {
var x = event.clientX - canvas.offsetLeft;
var y = event.clientY - canvas.offsetTop;

paintToCanvas(x, y);

var coords = localStorage["coords"];
if (coords) {
    coords = JSON.parse(coords);
} else {
    coords = [];
}
coords.push(x);
coords.push(y);
localStorage.setItem("coords", JSON.stringify(coords));
}

//color change starts

function handleRedBrushColorclicked() {
color = "red";
}

function handleBlueBrushColorclicked() {
color = "blue";
 }

function handleGreenBrushColorclicked() {
color = "green";
}

function handleYellowBrushColorclicked() {
color = "yellow";
}


// color change ends

function paintToCanvas(x, y) {
context.fillStyle = color;
context.fillRect(x - brushSize / 2, y - brushSize / 2, brushSize, brushSize);

所以在这里我使用本地存储来存储画笔大小和颜色，警报显示它似乎工作，但我仍然不知道如何实际存储它们，这意味着，如果我刷新我的页面，我的画布上没有任何变化。

var storeColorAndBrush = [color "  ", brushSize]
var store = storeColorAndBrush
localStorage.setItem("store",store)

alert(localStorage.store);

}

非常感谢，我是初学者。

4

1 回答 1

0

这就是我的做法：我会添加一个“保存”按钮，单击该按钮会存储整个图像以及当前的画笔大小和颜色。当您加载页面时，您在画布中绘制存储的图像并设置画笔大小和颜色：

$('.save').on('click',function() {
    var data = context.getImageData(x, y, img.width, img.height).data;
    localStorage.setItem('image', data); // save image data
    localStorage.setItem('brushSize', brushSize);
    localStorage.setItem('color', color);
});

负载：

brushSize = localStorage.getItem('brushSize');
color = localStorage.getItem('color');
var picture = localStorage.getItem('image');
context.putImageData(picture, 0, 0);
于 2014-03-13T09:54:08.353 回答