0

我不明白为什么这段代码不起作用。不管我怎么修它，它都不起作用。它不是PDF格式吗？如果不可能，如果您能告诉我如何更换它，我将不胜感激。另外，请问是否可以将手写文件再次保存为PDF文件，或者是否可以使用Web服务器上的DB保存，如果可以，请提供示例代码。

索引.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>lol</title>
</head>
<body>
    <div class="palette">
        <label>색상<input id="color" type="color"></label>
        <label>두께<input id="width" type="number" min="1" max="30"></label>
        <input type="button" class="btn" id="delete_canvas" value="그림 초기화&quot; onClick="delete_canvas()">
      </div>
    <iframe width="100%" height="1295" src="./src/krlang.pdf"></iframe>
    <canvas id="canvas" width="1600" height="900"></canvas><br>
    <script type="text/javascript">
        var elements = document.getElementsByClassName("drag-and-drop");
        var array = [];
        for (var i = 0; i < elements.length; i++) {
          array[i] = {}
          array[i].top = elements[i].style.top;
          array[i].left = elements[i].style.left;
        }
    
        function all_reset() {
          ret = confirm('모두 재설정합니다.');
          if (ret == true) {
            for (var i = 0; i < elements.length; i++) {
              elements[i].style.top = array[i].top;
              elements[i].style.left = array[i].left;
            }
            ctx.clearRect(0, 0, canvas.width, canvas.height);
          }
        }
      </script>
      <script type="text/javascript" src="canvas.js"></script>
</body>
</html>

画布.js

var drawing = false;
var before_x = 0;
var before_y = 0;

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.addEventListener('mousemove', draw_canvas);
canvas.addEventListener('mousedown', function(e) {
  drawing = true;
  var rect = e.target.getBoundingClientRect();
  before_x = e.clientX - rect.left;
  before_y = e.clientY - rect.top;
});
canvas.addEventListener('mouseup', function() {
  drawing = false;
});

function draw_canvas(e) {
if (!drawing){
  return
};
var rect = e.target.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
var w = document.getElementById('width').value;
var color = document.getElementById('color').value;
var r   = parseInt(color.substring(1,3), 16);
var g = parseInt(color.substring(3,5), 16);
var b  = parseInt(color.substring(5,7), 16);

ctx.lineCap = 'round';
ctx.strokeStyle = 'rgb('+ r + ',' + g + ',' + b + ')';
ctx.lineWidth = w;
ctx.beginPath();
ctx.moveTo(before_x, before_y);
ctx.lineTo(x, y);
ctx.stroke();
ctx.closePath();

before_x = x;
before_y = y;
}

function delete_canvas(){
ret = confirm('그리기 내용 삭제');
if (ret == true){
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}
}

var pen = document.getElementById('pencil');
var era = document.getElementById('eraser');

编辑

我决定做一个 webview 应用程序而不是在 web 服务器上运行这个 html 代码，请告诉我如何使用本地数据库来做

4

0 回答 0