时间戳

首页 > 解决方案 > 用 JS 制作绘图应用程序？

javascript - 用 JS 制作绘图应用程序？

问题描述

我想在 JS 中制作一个绘图应用程序。所以我开始用 HTML 创建一个画布，还写了一些 codeIN JS。然而，当我运行我的脚本时，我只能画一些点，我想要的是用鼠标手动画线。

请问你能帮帮我吗 ？

window.addEventListener("load", function(){
  var clear = document.getElementById("clear");
  var paint = false;

  can = document.querySelector("canvas");
  context = can.getContext("2d");
  can.addEventListener("mouseup", finish);
  can.addEventListener("mousemove", draw);
  clear.addEventListener("click", clearContent);
  can.addEventListener("mousedown", painting);

  function clearContent(){	
    context.clearRect(0, 0, can.width, can.height);
  }

  function painting(){
    paint = true;
  }

  function finish(){
    paint = false;
  }

  function draw(e){
    if (!paint) return 0;
      context.strokeStyle="black";
      context.lineWidth = 5;
      context.lineCap = "round";
      context.beginPath();
      context.moveTo(e.clientX, e.clientY);
      context.lineTo(e.clientX, e.clientY);
      context.stroke();
  }
});
canvas { border: 1px solid }
<canvas></canvas>
<br>
<button id="clear">Clear</button>

标签： javascripthtmleventscanvas

解决方案

您需要从前一点画线，而不是当前点。这样做非常简单，因为画布上下文记住了前一点。另外，不要调用beginPath，因为这会中断连接点的顺序。

您还可以使用更好的方法来确定确切的坐标。

请参阅您的代码的此变体：

window.addEventListener("load", function(){
  var clear = document.getElementById("clear");
  var paint = false;

  can = document.querySelector("canvas");
  context = can.getContext("2d");
  can.addEventListener("mouseup", finish);
  can.addEventListener("mousemove", draw);
  clear.addEventListener("click", clearContent);
  can.addEventListener("mousedown", painting);

  function clearContent(){	
    context.clearRect(0, 0, can.width, can.height);
  }

  function painting(){
    paint = true;
    context.beginPath(); /// <--- move this here
  }

  function finish(){
    paint = false;
  }

  function draw(e){
    if (!paint) return 0;
      var rect = e.target.getBoundingClientRect();
      var x = e.clientX - rect.left;
      var y = e.clientY - rect.top;
      context.strokeStyle="black";
      context.lineWidth = 5;
      context.lineCap = "round";
      // Don't do any of these here:
      // context.beginPath();
      // context.moveTo(x, y);
      // ... only draw line from previous point:
      context.lineTo(x, y);
      context.stroke();

  }
});
canvas { border: 1px solid }
<canvas></canvas>
<br>
<button id="clear">Clear</button>

推荐阅读