Question

http://codepen.io/PartTimeCoder/pen/qZJdPW?editors=0010

这是我的CodePen的链接。

我的HTML和CSS工作正常。但JavaScript并不像我想要的那样工作。它应该从你点击的最后一个点画一条线。

JavaScript低于 -

<html  ng-app="App" class="no-js" lang="en" >
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
    <script src="app.js"></script>    
  </head>

  <body ng-cloak> 
  <div ng-controller="main">
      <div ng-view></div>
    </div>
  </body>
</html>

Answer 1

每个mousedown事件调用ctx.moveTo(0, 0)，将其置于左上角。

将此代码移出mousedown事件，并且工作正常：

ctx.beginPath();
ctx.moveTo(0, 0);

CodePen

Answer 2

更改鼠标变量以设置起点

var mouse = {x : 0, y : 0};

然后将事件处理程序更新为最新点

canvas.addEventListener('touch', stuff);
canvas.addEventListener("mousedown", stuff);

function stuff(e) {
    ctx.beginPath();
    ctx.moveTo(mouse.x, mouse.y);
    ctx.lineTo(e.pageX, e.pageY);
    ctx.stroke();
    mouse = {x: e.pageX, y: e.pageY};
}

FIDDLE

Answer 3

您需要先保存上次点击的位置，然后再应用新的位置，例如：

codepen.io/themeler/pen/XdxboL?editors=0010

我的mousedown函数不是从最近的点绘制线条，而是从左上角绘制线条

3 个答案: