所以我一直在创建这个绘图工具，你可以在“ Canvas ”上“绘制”，它会在小 div 框中为你提供 HTML，或者你可以只用它来绘画，但我遇到了这个问题如果您长时间画/写，它就会开始出现间隙。我不太确定这是什么原因或如何解决它。
如果有人能告诉我问题出在哪里以及如何解决，我将不胜感激。
这是它的 JsBin:
https://jsbin.com/senejuq/edit?html,css,js,console,output
或者如果您只需要纯代码/代码片段:
var click = false;
var xr = [];
var yr = [];
var html = "";
function move() {
if (click) {
xr.push(event.clientX);
yr.push(event.clientY);
draw(xr[xr.length-1]-Number($('width').value)-5, yr[yr.length-1]-Number($('width').value)-5);
}
}
function draw(x,y) {
if ($('brushtype').value == "block") {
html += "<div style = 'position:absolute; background-color: "+$('color').value+"; width: "+Number($('width').value)+"px; height: "+Number($('width').value)+"px; margin-top: " + y + "px; margin-left:" + x +"px'></div>";
$('canvas').innerHTML = html +
"<div style = 'position:absolute; background-color: " + $('color').value + "; width: "+Number($('width').value)+"px; height: "+Number($('width').value)+"px; margin-top: " + y + "px; margin-left:" + x +"px'></div>";
} else if ($('brushtype').value == "brush") {
html += "<div style = 'position:absolute; background-color: "+$('color').value+"; width: "+Number($('width').value)+"px; height: "+Number($('width').value)+"px; margin-top: " + y + "px; margin-left:" + x +"px; border-radius: 300px;'></div>";
$('canvas').innerHTML = html +
"<div style = 'position:absolute; background-color: " + $('color').value + "; width: "+Number($('width').value)+"px; height: "+Number($('width').value)+"px; margin-top: " + y + "px; margin-left:" + x +"px; border-radius:300px;'></div>";
}
}
function ondown() {
click = true;
move();
}
function onup() {
click = false;
}
function $(arg) {
return document.getElementById(arg);
}
function pasteHTML() {
$('ta').innerHTML = "<div id = 'drawing' width = '100%' height = '100%'>" + html +"</div>";
}html {
width: 100%;
height: 100%;
cursor: crosshair;
}
body {
width: 100%;
height: 100%;
}
#canvas {
width: 100%;
height: 50%;
background-color: white;
border: 1px solid black;
}
textarea {
background-color: transparent;
resize: none;
width: 100%;
height: 100%;
border: 0px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id = "canvas" onmousedown = "ondown()"
onmousemove = "move()" onmouseup = "onup()"
></div>
<select id = "brushtype">
<option value = "block">Block</option>
<option value = "brush">Brush</option></select>
<select id = "color">
<option value = "black">Black</option>
<option value = "white">White</option>
<option value = "blue">Blue</option>
<option value = "green">Green</option>
<option value = "red">Red</option>
</select>
<input id = "width" type = "number" value = "10"/>
<button onclick = "pasteHTML()">Get HTMl</button>
<br/><textarea disabled id = "ta"></textarea>
</body>
</html>最佳答案
你的速度变慢了，因为你的“绘画”方法效率极低。每次添加一个框时，您都可以通过添加到 innerHTML 来完成此操作.这意味着整个 textarea#ta被浏览器完全重绘。因此，在绘制几分钟(或更短)之后，浏览器将重绘数千个 <div>。 s 每秒多次。
考虑使用 <canvas> 研究二维图形– Link .
或者，如果您必须使用 DOM 执行此操作(这不是它的本意!)，那么至少使用 appendChild 可以更有效地执行此操作– Link .
关于javascript - 一段时间后，我的绘图工具在绘图中留下了空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48818474/