[英]How to store Brush Size and Brush Color in a Drawing Web app
So I want to create a drawing app, and I did, I am able to change brush size and brush color, however, I want to save the stuff I draw including the brush size and the brush color. 因此,我想创建一个绘图应用程序,并且确实可以更改画笔大小和画笔颜色,但是,我想保存我绘制的内容,包括画笔大小和画笔颜色。 I am able to store the point I have drawn on the canvas now, but not the brush size and color. 我现在可以存储在画布上绘制的点,但不能存储画笔的大小和颜色。
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);
So here I used the local storage to store brush size and color, the alert shows it seems to work, but I still don't know how to actually store them, which means, if I refresh my page, nothing changes on my canvas. 因此,在这里我使用本地存储来存储画笔的大小和颜色,警报显示它似乎可以工作,但是我仍然不知道如何实际存储它们,这意味着,如果刷新页面,画布上的内容将保持不变。
var storeColorAndBrush = [color " ", brushSize]
var store = storeColorAndBrush
localStorage.setItem("store",store)
alert(localStorage.store);
}
Thank you very much, I am a beginner. 非常感谢,我是初学者。
This is how I would do it: I would add a "save" button which, when clicked, stores the whole image and the current brush size and color. 这就是我的操作方式:我将添加一个“保存”按钮,单击该按钮可以存储整个图像以及当前画笔的大小和颜色。 When you load the page you draw the stored image in the canvas and set the brush size and color: 加载页面时,您将在画布上绘制存储的图像并设置画笔大小和颜色:
$('.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);
});
on load: 负载:
brushSize = localStorage.getItem('brushSize');
color = localStorage.getItem('color');
var picture = localStorage.getItem('image');
context.putImageData(picture, 0, 0);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.