Question

所以我一直在创建这个绘图工具，你在“画布”上“绘制”，它会在小div框中给你HTML，或者你可以用它画画但是我遇到了这个问题如果你画了很长一段时间，它会开始有间隙。我不太确定这是什么原因或如何解决它。

如果有人能告诉我问题是什么以及如何解决问题，我会非常感激。

以下是JsBin：

https://jsbin.com/senejuq/edit?html,css,js,console,output

或者如果你只想要简单的代码/代码snippit：

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>

Answer 1

您正在经历减速，因为您的“绘画”方法效率极低。每次添加一个框时，您都可以通过添加innerHTML来完成此操作。这意味着浏览器完全重绘了整个textarea#ta。因此，在绘图几分钟（或更少）之后，浏览器每秒重绘数千<div>次。

考虑使用<canvas> - Link来查看2D图形。

或者，如果您必须使用DOM（这不是它的意思！），那么至少使用appendChild - Link更有效率。

一段时间后，我的绘图工具在绘图中留下了空白

1 个答案: