主页 / user-382382

Lusy's questions

Martin Hope
Lusy
Asked: 2020-04-12 00:47:26 +0800 CST
  • 2

帮助添加一个函数和一个按钮，在代码中绘制后清除画布。我尝试了很多方法，但它们只会卡住绘图功能。





    function init() {
      var tablet = document.getElementById("tablet");
      var ctx = tablet.getContext('2d');
      ctx.lineCap = 'round';
      var paint = false;
      tablet.addEventListener("mousedown", Down);
      tablet.addEventListener("mouseup", Up);
      tablet.addEventListener("mousemove", Move);

      function Down(e) {
        paint = true;
        ctx.beginPath();
        ctx.moveTo(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
      }

      function Up(e) {
        paint = false;
        ctx.closePath();
      }

      function Move(e) {
        if (!paint) return;
        ctx.lineTo(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
        ctx.stroke();
      }

      function setStyle() {
        ctx.strokeStyle = this.strokeStyle.value;
        ctx.lineWidth = this.lineWidth.value;
      }
      document.querySelector('form.canvas-attrs').addEventListener('change', setStyle);
    }

    init()


 <style>
    body {
      background: #ffffff url(https://drive.google.com/uc?export=view&id=1iPCcsPq2pPXDLrHbeq47qwnRSRwHitCZ);
      /* Цвет фона и путь к файлу */
      background-size: 1600px 700px;
      width: 1px;
      background-top: 10px;
      background-left: 100px;
      background-repeat: no-repeat;
      background-position: center top;
    }
#draggable { width: 32px; height: 32px; padding: 0.0em; }
    #draggable1 { width: 32px; height: 32px; padding: 0.0em; }
      #draggable2 { width: 32px; height: 32px; padding: 0.0em; }
 </style>

<script>
  $( function() {
    $( "#draggable" ).draggable();
    $( "#draggable1" ).draggable();
    $( "#draggable2" ).draggable();
</script>

<body>
<table>
  <tr>
<td><div id="draggable" class="ui-widget-content">
  <img src="https://drive.google.com/uc?export=download&id=1hSqUYfMvkYt3GAC1_aiKeL2QZeg5uP62" height="32" width="32"
</div></td>
 
<td> <div id="draggable1" class="ui-widget-content">
  <img src="https://drive.google.com/uc?export=download&id=1uuKROBRzA6xGtVc48xDf2KsSqR-1hpbe" height="32" width="32"
</div></td>

<td><div id="draggable2" class="ui-widget-content">
  <img src="https://drive.google.com/uc?export=download&id=1lG5A20O4avVJCsbfptRfZxPzcNBQ2b0w" height="32" width="32"
</div></td>
  </tr>
</table>


    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <form class="canvas-attrs">
      <p><b>Цвет маркера</b></p>
      <select name="strokeStyle">
        <option value="black">Черный</option>
        <option value="red" selected>Красный</option>
        <option value="green">Зеленый</option>
      </select>
      <p><b>Размер маркера</b></p>
      <select name="lineWidth">
        <option value="1">Маленькая</option>
        <option value="5" selected>Средняя</option>
        <option value="15">Большая</option>
      </select>
    </form>
    <canvas width="1300" height="650" style="border:0px solid #fff; margin-top: -80px; margin-left: 100px; cursor:crosshair;" id="tablet">
    </canvas>
canvas