javascript - 我正在制作绘图工具。怎么画的时候画的还行，但是画完allot之后松手，重新开始画，真的很慢

Question

我正在使用 HTML5 和 JS 来创建它。当我开始绘图时，它可以毫无延迟地绘制绘图。在我画了一点点之后，放开鼠标，重新开始，开始画需要几秒钟。 编辑：另外，画了一段时间后，我得到了非常尖的形状。任何想法为什么？

编辑：

我根据规则和评论添加了一个代码片段。

class Drawing {
	// So after many get-back-togethers I've finally broke up with JavaScript's arguments keyword which just does not compare to an array.
	// Now you have to provide an Array as args even if you only have one arg.
	// Every Drawing object needs to store the event that created it. This is needed for ctrl-z to be able to revert to the last pointerdown
	constructor(args, ev) {
		for (var arg of args) {
			// Every arg used when creating a Drawing must have a function to be called when that drawing is drawn. Otherwise, there won't be anything to do.
			if (!(arg.func))
				throw Error("A function must be provided!");
			// Make sure the function exists within ctx.
			if (!CanvasRenderingContext2D.prototype.hasOwnProperty(arg["func"]))
				throw Error(`${arg['func']} is not a property of the CanvasRenderingContext2D prototype!`);
		}
		// When a Drawing instance is drawn, it will call all it's functions in this.functions with their appropriate args.
		this.functions = args;
		this.ev = ev;
	}
}
const CSS_COLORS = //["AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige","Bisque","Black","BlanchedAlmond","Blue","BlueViolet","Brown","BurlyWood","CadetBlue","Chartreuse","Chocolate","Coral","CornflowerBlue","Cornsilk","Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenRod","DarkGray","DarkGrey","DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","Darkorange","DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray","DarkSlateGrey","DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue","DimGray","DimGrey","DodgerBlue","FireBrick","FloralWhite","ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","GoldenRod","Gray","Grey","Green","GreenYellow","HoneyDew","HotPink","IndianRed","Indigo","Ivory","Khaki","Lavender","LavenderBlush","LawnGreen","LemonChiffon","LightBlue","LightCoral","LightCyan","LightGoldenRodYellow","LightGray","LightGrey","LightGreen","LightPink","LightSalmon","LightSeaGreen","LightSkyBlue","LightSlateGray","LightSlateGrey","LightSteelBlue","LightYellow","Lime","LimeGreen","Linen","Magenta","Maroon","MediumAquaMarine","MediumBlue","MediumOrchid","MediumPurple","MediumSeaGreen","MediumSlateBlue","MediumSpringGreen","MediumTurquoise","MediumVioletRed","MidnightBlue","MintCream","MistyRose","Moccasin","NavajoWhite","Navy","OldLace","Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenRod","PaleGreen","PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue","Purple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen","SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray","SlateGrey","Snow","SpringGreen","SteelBlue","Tan","Teal","Thistle","Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke","Yellow","YellowGreen"];
	["#ff0000", "#ff4000", "#ff8000", "#ffbf00", "#ffff00", "#bfff00", "#80ff00", "#40ff00", "#00ff00", "#00ff40", "#00ff80", "#00ffbf", "#00ffff", "#00bfff", "#0080ff", "#0040ff", "#0000ff", "#4000ff", "#8000ff", "#bf00ff", "#ff00ff", "#ff00bf", "#ff0080", "#ff0040", "#ff0000"];
const canvas = $("canvas");
canvas.locked = false
const colorChanger = $('input[type = color]');
colorChanger.change(function(e) {
	changeColor(colorChanger.val(), e)
})
const colorOptionsDiv = $("#colorOptions");
const select = $("sselect");
const slider = $("#revisionSlider");
let eraserSize = 10;
slider.change(function(ev) {
	console.log(slider.val());
	if (slider.val() > ctx.history.length - 1) {
		ctx.future.push(ctx.history.splice(slider.val(), ctx.history.length));
		ctx.redraw();
	}
});
select.val("brush");
const ctx = canvas[0].getContext("2d");
let selection;
$("body > div > button").click(function() {
	let height = $('#height').val();
	let width = $('#width').val();
	let go = true;
	if (height === "" & width === "") {
		go = confirm("You haven't entered any dimensions. Would you like to go with your screen dimensions?\nThey are:\nWidth: " + window.innerWidth + "\nHeight: " + window.innerHeight);
		width = screen.width //window.innerWidth //- 8 ///1.06;
		height = screen.height //window.innerHeight //- 5 ///1.2;
	}
	else if (height < 300 && width >= 300) {
		go = confirm("Are you sure you don't want your canvas higher?");
	}
	else if (width < 300 && height >= 300) {
		go = confirm("Are you sure you don't want your canvas wider?");
	}
	else if (width < 300 && height < 300) {
		go = confirm("Are you sure you don't want a larger canvas?");
	}
	if (go) {
		updateCanvasSize()

		new ResizeObserver(updateCanvasSize).observe(canvas.parent()[0])
		$(this.parentNode).remove();
		$('#mainDiv, #actions, #paintControls').show();
		document.documentElement.webkitRequestFullScreen()
		canvas.parent().height(height)
		canvas.parent().width(width)
	}
	else return;
});
$("body > div > input").keyup(function(ev) {
	if (ev.keyCode === 13) {
		$("body > div > button").click();
	}
});

function pencilDown(ev) {
	if (ev.buttons - 0 == 1) {
		ctx.redraw();
		let mode = select.val().toLowerCase();
		canvas.pointerIsDown = true;
		if (mode === "brush") {
			canvas.changed = true;
			let drawing = function() {
				ctx.beginPath();
				ctx.moveTo(ev.offsetX, ev.offsetY);
			};
			drawing.ev = ev;
			ctx.draw(drawing);
		}
		else if (mode === "line") {
			ctx.beginPath();
			ctx.moveTo(ev.offsetX, ev.offsetY);
		}
		else if (mode === 'select') {
			ctx.setLineDash([8, 16]);
			ctx.strokeStyle = "black";
		}
		canvas.lastPointerDown = ev;
	}
}
canvas.on('pointerdown', pencilDown);
canvas.on('pointerdown', function() {
	$("#paintControls").css({ top: "-50px" });
	$("#actions").css({ width: 0 });
});
$(window).on('pointerup', function(ev) {
	canvas.pointerIsDown = false;
});

function pencilUp(ev) {
	let mode = select.val().toLowerCase();
	canvas.lastPointerUp = ev;
	if (mode == "line") {
		ctx.fillLine(ctx.lastPointerDown.offsetX, ctx.lastPointerDown.offsetY, ev.offsetX, ev.offsetY);
	}
	else if (mode === "select") {
		ctx.setLineDash([0, 0]);
		selection = [canvas.lastPointerDown.offsetX, canvas.lastPointerDown.offsetY, 0 - (canvas.lastPointerDown.offsetX - canvas.lastPointerUp.offsetX), 0 - (canvas.lastPointerDown.offsetY - ev.offsetY)];
		ctx.redraw();
		ctx.strokeStyle = "#0099ff"
		ctx.strokeRect(...selection);
	}
}
canvas.on('pointerup', pencilUp);
canvas.on('pointerup', function() {
	$("#paintControls").css({ top: "2px" });
	$("#actions").css({ width: "40px" });
});

function pencilMove(ev) {
	if (canvas.pointerIsDown) {
		let endX = ev.offsetX - canvas.lastPointerDown.offsetX;
		let endY = ev.offsetY - canvas.lastPointerDown.offsetY;
		let mode = select.val().toLowerCase();
		if (mode === "brush") {
			let funcs = [
				{ func: "lineTo", args: [ev.offsetX, ev.offsetY] },
				{ func: "stroke", args: [] }
			];
			let drawing = new Drawing([], ev);
			drawing.functions = funcs;
			ctx.draw(drawing);

			// implent this later, it looks very cool! ctx.closePath();
			// and this ctx.fill();
		}
		else if (mode === "line") {
			// try{
			// 	tempLine.clear();
			// } catch (e){}
			// tempLine = ctx.temporaryLine(ctx.lastPointerDown.offsetX, ctx.lastPointerDown.offsetY, ev.offsetX, ev.offsetY, 3);
			ctx.redraw();
			ctx.lineTo(ev.offsetX, ev.offsetY);
			ctx.stroke();
		}
		else if (mode === "select") {
			ctx.redraw();
			ctx.setLineDash([6, 8]);
			ctx.strokeStyle = "black";
			// if (endX<0)endX=0;
			// let drawing = new Drawing([{func:"strokeRect", args: [canvas.lastPointerDown.offsetX, canvas.lastPointerDown.offsetY, endX, endY]}], ev);
			// ctx.draw(drawing, false);
			ctx.strokeRect(canvas.lastPointerDown.offsetX, canvas.lastPointerDown.offsetY, endX, endY);
		}
		else if (mode === "bug1") {
			// ctx.redraw();
			var drawing = new Drawing([{ func: "strokeRect", args: [canvas.lastPointerDown.offsetX, canvas.lastPointerDown.offsetY, endX, endY] }], ev);
			ctx.draw(drawing);
		}
		else if (mode === "bug2") {
			ctx.future.push(ctx.history.pop())
			ctx.redraw();
			var drawing = new Drawing([{ func: "strokeRect", args: [canvas.lastPointerDown.offsetX, canvas.lastPointerDown.offsetY, endX, endY] }], ev);
			ctx.draw(drawing);
		}
		else if (mode === "timeline") {
			ctx.future.push(ctx.history.pop())
			ctx.redraw();
		}
		else if (mode === "dots") {
			let drawing = new Drawing([{ func: "fillRect", args: [ev.offsetX, ev.offsetY, 1, 1] }], ev);
			ctx.draw(drawing);
		}
		else if (mode === "eraser") {
			let drawing = new Drawing([{ func: "clearRect", args: [ev.offsetX - eraserSize / 2, ev.offsetY - eraserSize / 2, eraserSize, eraserSize] }]);
			ctx.draw(drawing);
		}
		canvas.lastPointerMove = ev;
	}
}
canvas.on('pointermove', pencilMove);
$(window).on('keydown', function(ev) {
	if (ev.keyCode === 8 || ev.keyCode === 46) {
		var drawing = new Drawing([{ func: "clearRect", args: selection }], ev);
		ctx.draw(drawing);
		ctx.redraw();
	}
	else if (ev.key.toLowerCase() === 'z' && ev.ctrlKey && ev.shiftKey) {
		ctx.future.push(ctx.history.pop());
		ctx.redraw();
	}
	else if (ev.key.toLowerCase() === 'y' && ev.ctrlKey && ev.shiftKey) {
		ctx.history.push(ctx.future.pop());
		ctx.redraw();
	}
});

function undo() {
	for (var item of ctx.history.slice().reverse()) {
		try {
			if (item.ev.type === "pointerdown") {
				locationInArray = ctx.history.indexOf(item);
				ctx.future = ctx.future.concat(ctx.history.splice(locationInArray, ctx.history.length - locationInArray));
				ctx.redraw();
				return;
			}
		}
		catch (e) { continue; }
	}
}

function redo() {
	for (var item of ctx.future.slice().reverse()) {
		try {
			if (item.ev.type === "pointerdown") {
				locationInArray = ctx.future.indexOf(item);
				ctx.history = ctx.history.concat(ctx.future.splice(locationInArray, ctx.future.length - locationInArray));
				ctx.redraw();
				return;
			}
		}
		catch (e) { continue; }
	}
}
$(window).on('keyup', function(ev) {
	var locationInArray
	if (ev.key.toLowerCase() === 's' && ev.ctrlKey && ev.shiftKey) {
		save();
	}
	if (ev.key.toLowerCase() === 'z' && ev.ctrlKey && !ev.shiftKey) {
		undo()
	}
	if (ev.key.toLowerCase() === 'y' && ev.ctrlKey && !ev.shiftKey) {
		redo()
	}
});
colorChanger.change(function() {
	var drawing = new Drawing([{ func: "set", args: [{ 'strokeStyle': this.value, 'fillStyle': this.value, 'shadowColor': this.value }] }], ev);
	ctx.draw(drawing);
	addNewColor(this.value);
});
CanvasRenderingContext2D.prototype.clear = function(record, ev) {
	ev = ev || {};
	if (record) {
		var drawing = new Drawing([{ func: "clearRect", args: [0, 0, this.canvas.width, this.canvas.height] }], ev);
		this.draw(drawing);
	}
	else
		this.clearRect(0, 0, this.canvas.width, this.canvas.height);
};
CanvasRenderingContext2D.prototype.clearSelection = function(record = true, ev = null) {
	if (selection) {
		x = selection[0];
		y = selection[1];
		w = selection[2];
		h = selection[3]
		selection = null
	}
	else {
		if (!confirm("Are you sure you want to clear the canvas?")) return
		x = 0;
		y = 0;
		w = this.canvas.width;
		h = this.canvas.height;
	}
	if (record) {
		var drawing = new Drawing([{ func: "clearRect", args: [x, y, w, h] }], ev);
		this.draw(drawing);
	}
	else
		this.clearRect(x, y, w, h);
	ctx.redraw()
};
CanvasRenderingContext2D.prototype.draw = function(drawing, record = true) {
	if (drawing instanceof Drawing) {
		for (func of drawing.functions) {
			this[func.func](...func.args);
		}
	}
	else if (drawing instanceof Function) {
		if (drawing.args)
			drawing(...drawing.args);
		else drawing();
	}
	else {
		drawing.toString = drawing.toString || function() { return this; };
		throw TypeError(`${drawing.toString()+"yt"} is not a Drawing or Function!`);
	}
	if (record) {
		this.add(drawing);
		slider.attr("max", Number(slider.attr("max")) + 1);

	}
	this.lastRender = URLToImageEl(canvas.toURL())
};
CanvasRenderingContext2D.prototype.history = [];
CanvasRenderingContext2D.prototype.future = [];
CanvasRenderingContext2D.prototype.add = function(drawing) {
	this.history.push(drawing);
};

CanvasRenderingContext2D.prototype.redraw = function(cache = false) {
	var _ctx = this
	this.clear();
	if (!cache) {
		for (var drawing of this.history) {
			this.draw(drawing, false);
		}
	}
	else {
		this.draw(function() {
			console.log(_ctx.lastRender)
			_ctx.drawImage(_ctx.lastRender, 0, 0)

		})
	}
};
CanvasRenderingContext2D.prototype.set = function(prop, val) {
	if (typeof prop === "string" & typeof val === "string" | typeof val === "number")
		this[prop] = val;
	else if (typeof prop === "object" & !val) {
		for (var key in prop) {
			this[key] = prop[key]
		}
	}
	else throw Error("Invalid arguments")
}
$("#strokeWidthChanger input").change(function() {
	ctx.lineWidth = this.value;
});
for (var color of CSS_COLORS) {
	addNewColor(color);
}

function addNewColor(color) {
	colorOptionsDiv.html(colorOptionsDiv.html() + `<button class="colorOption" style="background-color:${color}" onclick="changeColor('${color}')"></button>`);
}

function changeColor(color, ev) {
	ev = ev || {};
	if (color.startsWith("rgb"))
		colorChanger.val(rgbToHex(color));
	else colorChanger.val(color);
	var colorChange = function() {
		var drawing = new Drawing([{ func: "set", args: [{ 'strokeStyle': color, 'fillStyle': color, 'shadowColor': color }] }], ev);
		ctx.draw(drawing);
	};
	ctx.draw(colorChange);
}
canvas.toURL = function() {
	return this[0].toDataURL()
}

function save() {
	ctx.redraw();
	var dataUrl = canvas.toURL();
	var a = document.createElement("A");
	a.download = $("#downloadName").val();
	a.href = dataUrl;
	a.click();
}

function configCanvas() {
	ctx.draw(function() {
		ctx.strokeStyle = 'black';
		ctx.fillStyle = 'black';
		ctx.setLineDash([0, 0]);
		ctx.lineJoin = "round";
		ctx.lineCap = "round";
		ctx.shadowBlur = 1;
		ctx.shadowColor = ctx.strokeStyle
		ctx.lastRender = new Image()
		ctx.lastRender.src = ""
		this.type = null;
	});
}
configCanvas();
sselectsOptions = $("sselect soption");
sselectsOptions.click(function() {
	$(this).closest("sselect").val(this.getAttribute("value"));
})

function componentToHex(c) {
	var hex = c.toString(16);
	return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(color) {
	color = color.replace("rgb(", "").replace(")", "").replace(" ", "").split(",")
	console.log(color)
	r = color[0];
	g = color[1];
	b = color[2];
	return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
let brushes = {
	pencil: function() {

	}
}

function updateCanvasSize() {
	canvas.attr('width', canvas.parent().width() - 6)
	canvas.attr('height', canvas.parent().height() - 6)
	ctx.redraw()
}

function URLToImageEl(URL) {
	var img = new Image()
	img.src = URL
	return img
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="startDiv">
		<h3>Enter a height and width to create your canvas with those dimensions</h3>
		<h5>You can resize it at any point after creation.</h5>
		<input placeholder="Height" id="height" type="number" />
		<br />
		<input placeholder="Width" id="width" type="number" />
		<button>Create canvas</button>
	</div>
	<div id="mainDiv" style="display: none;">
		<div id="canvas-container">
			<canvas></canvas>
		</div>
	</div>
	<div id="paintControls" style="display: none">
		<div id="colorOptions">
			<div id="colorPickerContainer">
				<input type="color" class="field-radio" />
			</div>
			<button class="colorOption" style="background-color:black" onclick="changeColor('black')"></button>
		</div>
	</div>
	<div id="actions" style="display: none">
		<div class="tooltip">
			<span class="tooltiptext">Clear canvas</span>
			<i onclick="ctx.clearSelection()" class="material-icons awesomeButton action">clear</i>
		</div>
		<div class="tooltip">
			<span class="tooltiptext">Download</span>
			<soption class="material-icons awesomeButton action" value="download" id="download" onclick="save();">file_download</soption>
		</div>
		<sselect id="options">
			<div class="tooltip">
				<span class="tooltiptext">Select brush</span>
				<soption class="material-icons awesomeButton action" value="brush" id="brush">
					brush
				</soption>
			</div>
			<div class="tooltip">
				<span class="tooltiptext">Select area</span>
				<soption class="material-icons awesomeButton action" value="select" id="select">crop_free</soption>
			</div>
			<soption id="line"></soption>
			<div class="tooltip">
				<span class="tooltiptext">Eraser</span>
				<soption id="eraser" class="awesomeButton" value="eraser">E</soption>
			</div>
			<div class="tooltip">
				<span class="tooltiptext">RectEffect</span>
				<soption class="awesomeButton material-icons" value="bug1">check_box_outline_blank</soption>
			</div>
			<div class="tooltip">
				<span class="tooltiptext">Tools and colors settings</span>
				<soption class="settings awesomeButton material-icons" onclick="$(document.body).append(`<div style='position: fixed;top: 0;left: 0;z-index:3;text-align:center;background: black;width:100%;height:100%'><input type='range' min='0' max='2'></div>`)">settings</soption>
			</div>
			<div class="tooltip">
				<span class="tooltiptext">Insert image</span>
				<i id="image" class="awesomeButton material-icons" value="insertImage" onclick="$(this).next().click()">image</i>
				<input id="imageFilePicker" style="display: none;" type="file">
			</div>
			<div class="tooltip">
				<span class="tooltiptext">Undo</span>
				<i class="awesomeButton material-icons" onclick="undo()">undo</i>
			</div>
			<div class="tooltip">
				<span class="tooltiptext">Redo</span>
				<i class="awesomeButton material-icons" onclick="redo()">redo</i>
			</div>
		</sselect>
	</div>

这是一支带有 CSS 的笔

标签： javascriptcanvashtml5-canvas